• EasyUI_DataGrid数据操作


    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     }
  • 相关阅读:
    城市联动
    Js-右键事件
    JS-键盘移动事件
    Js-点名器
    前端学习——HTML
    前端学习——前端基础
    Redis数据库学习
    2020系统综合实践 期末大作业
    #Nginx+Tomcat+Redis session共享
    2020系统综合实践 第7次实践作业
  • 原文地址:https://www.cnblogs.com/bonnie-w/p/6756036.html
Copyright © 2020-2023  润新知