EasyUI_DataGrid数据操作

1、html:

 1 <div style="width: 1100px;height: 350px ;overflow: scroll">
 2                 <table id="DataTb" title="客户信息" class="easyui-datagrid" style="width: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     }

 

posted @ 2017-04-24 11:35  Bonnie_W  阅读(158)  评论(0)  编辑  收藏  举报