<div style="width: 250px;box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);text-align: center;">
<div style="background-color: #4caf50; color: #fff; padding: 10px;font-size: 40px;"> <h1>1</h1> </div>
<div style="padding: 10px;"> <p>January 1, 2016</p> </div>
</div>
1]拖一个UnimList1,设置Align为alClient
2]在UnimFormCreate事件里写入
procedure TMainmForm.UnimFormCreate(Sender: TObject); var i:Integer; begin for i := 0 to 10 do begin //i 一定要从0开始 unimList1.Items.Add( ' <div style="width: 250px;box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);text-align: center;"> ' + ' <div style="background-color: #4caf50; color: #fff; padding: 10px;font-size: 40px;"> <h1>'+i.ToString+'</h1></div> ' + ' <div style="padding: 10px;"> <p>January '+i.ToString+', 2016</p> </div> ' +' <button onclick="abtnclick('''+i.ToString+''')">按钮</button>' + ' </div> ' ); end; end;
3]写道一个js文件里 然后servermodule customfile引入
function abtnclick(id){ console.log(id); ajaxRequest(MainmForm.UnimList1, 'test',['id=' + id]); }
4]UnimList1AjaxEvent事件中写入代码
procedure TMainmForm.UnimList1AjaxEvent(Sender: TComponent; EventName: string; Params: TUniStrings); begin if EventName ='test' then begin showmessage( Params.Values['id']); end;
即可看到效果
5]UnimList1AjaxEvent事件中写入 业务处理 ,并返回 业务 处理结果
procedure TMainmForm.UnimList1AjaxEvent(Sender: TComponent; EventName: string; Params: TUniStrings); begin if EventName ='test' then begin showmessage( Params.Values['id']); UnimList1.Items[strtoint(Params.Values['id'])]:= ' <div style="width: 250px;box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);text-align: center;"> ' + ' <div style="background-color: #4caf50; color: #fff; padding: 10px;font-size: 40px;"> <h1>'+Params.Values['id']+' 已处理</h1></div> ' + ' <div style="padding: 10px;"> <p>January '+Params.Values['id']+', 2016</p> </div> ' +' <button disabled onclick="abtnclick('''+Params.Values['id']+''')">按钮</button>' + ' </div> ' ; end;