1、html:
1 <div style=" 1100px;height: 350px ;overflow: scroll"> 2 <table id="DataTb" title="客户信息" class="easyui-datagrid" style="2000px;height:330px" 3 idfield="itemid" pagination="true" fitcolumns="true" 4 data-options="iconCls:'icon-save',rownumbers:true,url:'../Ajax/Customer.ashx?action=getlist',pageSize:10, pageList:[5,10,15,20],method:'get',toolbar:'#tb',striped:true,singleSelect:true"> 5 <thead> 6 <tr> 7 <th>绑定每列数据</th> 8 </tr> 9 </thead> 10 </table> 11 </div>
2、加载,查询:
1 function search() { 2 $('#DataTb').datagrid('load', { 3 CompanyName: $(".CompanyName").val(), 4 CompanyPhone: $(".CompanyPhone").val(), 5 ………… 6 }) 7 }
3、OnRowClick事件:当用户点击一行时触发,参数包括:rowIndex:被点击行的索引,从 0 开始,rowData:被点击行对应的记录
1 $(function () { 2 $("#DataTb").datagrid({ 3 onClickRow: function (index, row) { 4 KhNumber = row["KhNumber"]; 5 $(".CompanyName").val(row["CompanyName"]); 6 $(".CompanyAddress").val(row["CompanyAddress"]); 7 ………… 8 } 9 }) 10 })
4、删除
1 function Delete() { 2 var s = $("#DataTb").datagrid("getSelected"); 3 var id = s.Id; 4 $.ajax({ 5 url: "../Ajax/Customer.ashx?action=delete&id=" + id, 6 type: "POST", 7 dataType: "json", 8 success: function (data) { 9 if (data.code == 1) { 10 $.messager.alert("操作提示:", data.msg); 11 $("#DataTb").datagrid('load', ({})) 12 } else { 13 $.messager.alert("操作提示:", data.msg); 14 } 15 } 16 }) 17 }