JQuery EasyUI(40)

梦里梦外; 2023-06-21 10:24 39阅读 0赞

##                      第三十二章： DataGrid（数据表格）组件\[9\] ##

### 学习要点： ###

> 1.  剩下的方法和事件

--------------------

###  一、剩下的方法和事件 ###

<table> 
 <thead> 
  <tr> 
   <th colspan="3" style="text-align:center;">DataGrid列事件</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="text-align:center;">事件名</td> 
   <td style="text-align:center;">参数</td> 
   <td style="text-align:center;">说明</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">onLoadSuccess</td> 
   <td style="text-align:center;">data</td> 
   <td style="text-align:center;">在数据加载成功的时候触发。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">onLoadError</td> 
   <td style="text-align:center;">none</td> 
   <td style="text-align:center;">在载入远程数据产生错误的时候触发。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">onBeforeLoad</td> 
   <td style="text-align:center;">param</td> 
   <td style="text-align:center;">在载入请求数据之前触发，如果返回false可终止载入数据。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">onClickRow</td> 
   <td style="text-align:center;">rowIndex,rowData</td> 
   <td style="text-align:center;">在用户点击一行的时候触发，参数包括：rowIndex：点击的行的索引值，该索引值从0开始。rowData：对应于点击行的记录。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">onDblClickRow</td> 
   <td style="text-align:center;">rowIndex,rowData</td> 
   <td style="text-align:center;">在用户双击一行的时候触发，参数包括：rowIndex：点击的行的索引值，该索引值从0开始。rowData：对应于点击行的记录。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">onClickCell</td> 
   <td style="text-align:center;">rowIndex,field,value</td> 
   <td style="text-align:center;">在用户点击一个单元格的时候触发。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">onDblClickCell</td> 
   <td style="text-align:center;">rowIndex,filed,value</td> 
   <td style="text-align:center;">在用户双击一个单元格的时候触发。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">onSortColumn</td> 
   <td style="text-align:center;">sort,order</td> 
   <td style="text-align:center;">在用户排序一列的时候触发，参数包括：sort：排序列字段名称。order：排序列的顺序（ ASC或DESC）。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">onResizeColumn</td> 
   <td style="text-align:center;">field,width</td> 
   <td style="text-align:center;">在用户调整大小的时候触发。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">onSelect</td> 
   <td style="text-align:center;">rowIndex,rowData</td> 
   <td style="text-align:center;">在用户选择一行的时候触发，参数包括：rowIndex：选择的行的索引值，索引从0开始。rowData：对应于所选行的记录。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">onUnselect</td> 
   <td style="text-align:center;">rowIndex,rowData</td> 
   <td style="text-align:center;">在用户取消选择一行的时候出发，参数包括：rowIndex：选择的行的索引，索引从0开始。rowData：对应于所选行的记录。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">onSelectAll</td> 
   <td style="text-align:center;">rows</td> 
   <td style="text-align:center;">在用户选择所有行的时候触发。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">onUnSelectAll</td> 
   <td style="text-align:center;">rows</td> 
   <td style="text-align:center;">在用户选择取消所有行的时候触发。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">onBeforeEdit</td> 
   <td style="text-align:center;">rowIndex,rowData</td> 
   <td style="text-align:center;">在用户开始编辑一行的时候触发。参数包括：rowIndex：编辑行的索引，索引从0开始。rowData：对应于编辑行的记录。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">onAfterEdit</td> 
   <td style="text-align:center;">rowIndex,rowData,changes</td> 
   <td style="text-align:center;">在用户完成编辑一行的时候触发。参数包括：rowIndex：编辑行的索引，索引从0开始。rowData：对应于完成编辑的行的记录。changes：更改后的字段（键）/值对。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">onCancelEdit</td> 
   <td style="text-align:center;">rowIndex,rowData</td> 
   <td style="text-align:center;">在用户取消编辑行的时候触发。参数包括：rowIndex：编辑行的索引。索引从0开始。rowData：对应于编辑行的记录。</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <thead> 
  <tr> 
   <th colspan="3" style="text-align:center;">DataGrid方法</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="text-align:center;">事件名</td> 
   <td style="text-align:center;">参数</td> 
   <td style="text-align:center;">说明</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">options</td> 
   <td style="text-align:center;">none</td> 
   <td style="text-align:center;">返回属性对象</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">getPage</td> 
   <td style="text-align:center;">none</td> 
   <td style="text-align:center;">返回页面对象</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">getPanel</td> 
   <td style="text-align:center;">none</td> 
   <td style="text-align:center;">返回面板对象</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">getColumnFields</td> 
   <td style="text-align:center;">frozen</td> 
   <td style="text-align:center;">返回列字段，如果设置了frozen属性为true，将返回列的字段名。var opts = $(‘#dg’).datagrid('getColumnFields');//获得解冻列。var opts = $(‘#dg’).datagrid('getColumnFields',true);//获得冻结列。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">getColumnOption</td> 
   <td style="text-align:center;">field</td> 
   <td style="text-align:center;">返回指定列属性。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">resize</td> 
   <td style="text-align:center;">param</td> 
   <td style="text-align:center;">做调整和布局。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">load</td> 
   <td style="text-align:center;">param</td> 
   <td style="text-align:center;">加载和显示第一页的所有行。如果指定了‘param’，它将取代‘queryParams’属性。通常可以通过传递一些参数执行一次查询。通过调用这个方法从服务器加载新数据。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">reload</td> 
   <td style="text-align:center;">param</td> 
   <td style="text-align:center;">重载行，等同于‘load’方法。但是它将保存在当前页。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">reloadFooter</td> 
   <td style="text-align:center;">footer</td> 
   <td style="text-align:center;">重载页脚行。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">loading</td> 
   <td style="text-align:center;">none</td> 
   <td style="text-align:center;">显示载入状态。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">loaded</td> 
   <td style="text-align:center;">none</td> 
   <td style="text-align:center;">隐藏载入状态。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">fitColumn</td> 
   <td style="text-align:center;">none</td> 
   <td style="text-align:center;">使列自动展开/收缩到合适的DataGrid宽度。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">fitColumnSize</td> 
   <td style="text-align:center;">field</td> 
   <td style="text-align:center;">固定列大小。如果‘field’参数未配置，所有列大小将都是固定的。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">fitRowHeight</td> 
   <td style="text-align:center;">index</td> 
   <td style="text-align:center;">固定列指定高度。如果‘index’参数为配置，所有行高度都是固定的。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">freezeRow</td> 
   <td style="text-align:center;">index</td> 
   <td style="text-align:center;">冻结指定行，当DataDrid表格向下滚动的时候始终保持被冻结的行显示在顶部。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">autoSizeClumn</td> 
   <td style="text-align:center;">field</td> 
   <td style="text-align:center;">自动调整列宽度以适应内容。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">loadData</td> 
   <td style="text-align:center;">data</td> 
   <td style="text-align:center;">加载本地数据，旧的行将被移除。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">getData</td> 
   <td style="text-align:center;">none</td> 
   <td style="text-align:center;">返回加载完毕后的数据。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">getRows</td> 
   <td style="text-align:center;">none</td> 
   <td style="text-align:center;">返回当前页的所有行。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">getFooterRows</td> 
   <td style="text-align:center;">none</td> 
   <td style="text-align:center;">返回页脚行。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">getRowIndex</td> 
   <td style="text-align:center;">row</td> 
   <td style="text-align:center;">返回指定行的索引号，改行的参数可以是一行记录或一个ID字段值。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">getChecked</td> 
   <td style="text-align:center;">none</td> 
   <td style="text-align:center;">在复选框被选中的时候返回所有行。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">getSelected</td> 
   <td style="text-align:center;">none</td> 
   <td style="text-align:center;">返回第一个被选中的行或没有别选中的行则返回null。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">getSelections</td> 
   <td style="text-align:center;">none</td> 
   <td style="text-align:center;">返回所有被选中的行，当没有记录被选中的时候将返回一个空数组。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">clearSelections</td> 
   <td style="text-align:center;">none</td> 
   <td style="text-align:center;">清除所有选择的行。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">clearChecked</td> 
   <td style="text-align:center;">none</td> 
   <td style="text-align:center;">清除所勾选的行。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">scrollTo</td> 
   <td style="text-align:center;">index</td> 
   <td style="text-align:center;">滚动到指定的行。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">heighlightRow</td> 
   <td style="text-align:center;">index</td> 
   <td style="text-align:center;">高亮一行。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">selectAll</td> 
   <td style="text-align:center;">none</td> 
   <td style="text-align:center;">选择当前页中所有的行。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">unselectAll</td> 
   <td style="text-align:center;">none</td> 
   <td style="text-align:center;">取消选择所有当前页中所有的行。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">selectRow</td> 
   <td style="text-align:center;">index</td> 
   <td style="text-align:center;">&nbsp;选择一行，&nbsp;行索引从0开始。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">selectRecord</td> 
   <td style="text-align:center;">idValue</td> 
   <td style="text-align:center;">通过ID值参数选择一行。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">unselectRow</td> 
   <td style="text-align:center;">index</td> 
   <td style="text-align:center;">取消选择一行。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">checkAll</td> 
   <td style="text-align:center;">none</td> 
   <td style="text-align:center;">勾选当前页中的所有行。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">uncheckAll</td> 
   <td style="text-align:center;">none</td> 
   <td style="text-align:center;">取消勾选当前页中的所有行。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">checkRow</td> 
   <td style="text-align:center;">index</td> 
   <td style="text-align:center;">勾选一行，行索引从0开始。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">&nbsp;uncheckRow</td> 
   <td style="text-align:center;">index</td> 
   <td style="text-align:center;">取消勾选一行，行索引从0开始。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">beginEdit</td> 
   <td style="text-align:center;">index</td> 
   <td style="text-align:center;">开始编辑行。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">editEdit</td> 
   <td style="text-align:center;">index</td> 
   <td style="text-align:center;">结束编辑行。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">cancelEdit</td> 
   <td style="text-align:center;">index</td> 
   <td style="text-align:center;">取消编辑行。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">getEditors</td> 
   <td style="text-align:center;">index</td> 
   <td style="text-align:center;"> <p>获取指定行的编辑器。每个编辑器都有以下属性：actions：编辑器可以执行的动作。同编辑器定义。target：目标编辑器的JQuery对象。field：字段名称。type：编辑器类型，比如：‘text’，‘combobox’,‘databox’等。</p> </td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">getEditor</td> 
   <td style="text-align:center;">options</td> 
   <td style="text-align:center;">获取指定编辑器，options包含两个属性：index：行索引。field：字段名称。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">refreshRow</td> 
   <td style="text-align:center;">index</td> 
   <td style="text-align:center;">刷新行。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">validateRow</td> 
   <td style="text-align:center;">index</td> 
   <td style="text-align:center;">验证指定的行，当验证有效的时候返回true。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">updateRow</td> 
   <td style="text-align:center;">param</td> 
   <td style="text-align:center;">更新指定行，参数包含下列属性：index：执行更新操作的行索引。row：更新行的新数据。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">appendRow</td> 
   <td style="text-align:center;">row</td> 
   <td style="text-align:center;">追加一个新行，新行将被添加到最后的位置。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">insertRow</td> 
   <td style="text-align:center;">param</td> 
   <td style="text-align:center;">插入一个新行，参数包括以下属性：index：要插入的行索引，如果该索引值未定义，则追加新行。row：行数据。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">deleteRow</td> 
   <td style="text-align:center;">index</td> 
   <td style="text-align:center;">删除行。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">getChanges</td> 
   <td style="text-align:center;">type</td> 
   <td style="text-align:center;">从上一次的提交获取改变的所有行。类型参数指明用哪些类型改变的行，可以使用的值有：inserted，deleted，updated等。当类型参数未配置的时候，返回所有改变的行。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">acceptChanges</td> 
   <td style="text-align:center;">none</td> 
   <td style="text-align:center;">提交所有从加载或者上一次调用acceptChange函数后更改的数据。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">rejectChanges</td> 
   <td style="text-align:center;">none</td> 
   <td style="text-align:center;">回滚所有从创建或者上一次调用acceptChange函数后更改的数据。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">mergeCells</td> 
   <td style="text-align:center;">options</td> 
   <td style="text-align:center;">合并单元格，options包含以下属性：index：行索引。field：字段名称。rowspan：合并的行数。colspan：合并的列数。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">showColumn</td> 
   <td style="text-align:center;">field</td> 
   <td style="text-align:center;">显示指定的列。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">hideColumn</td> 
   <td style="text-align:center;">field</td> 
   <td style="text-align:center;">隐藏指定的列。</td> 
  </tr> 
 </tbody> 
</table>

<!DOCTYPE html>
    <html>
      <head>
        <title>JQuery Easy UI</title>
        <meta charset="utf-8"/>
        <script type="text/javascript" src="easyui/jquery.min.js"></script>
        <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
        <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
        <script type="text/javascript" src="js/index.js"></script> 
        <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
        <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>  
        <style>
            .textbox{
                height:200px;
                margin:0;
                padding:0 2px;
                box-sizing:content-box;
           }
        </style>            
    </head>
      <body>
           <table id="box"></table>
         <div id="tb" style="padding:5px;">
          <div style="margin-buttom:5px;">
            <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="obj.add();">添加</a>
            <a href="#" class="easyui-linkbutton" iconCls="icon-deit" plain="true" onclick="obj.edit();">修改</a>
            <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true"
    onclick="obj.remove();">删除</a>
            <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" style="display:none" id="save">保存</a>
            <a href="#" class="easyui-linkbutton" iconCls="icon-redo" plain="true" style="display:none" id="redo">取消编辑</a>
          </div>
            <div style="padding:0 0 0 7px;color='#ccc'">
               查询账号：<input type="text" name="user" class="textbox" style="width:100px">
               创建时间从：<input type="text" name="date_from" class="easyui-datebox" 
     editable="false" style="width:100px"> 到：<input type="text" name="date_to" class="easyui-datebox" editable="false" style="width:100px">
               <a href="#" class="easyui-linkbutton" iconCls="icon-search" onclick="obj.search();">查询</a>
            </div>
         </div>
    
         <div id="menu" class="easyui-menu" style="width:120px;display:none;">
           <div onclick="" iconCls="icon-add">增加</div>
           <div onclick="" iconCls="icon-remove">删除</div>
           <div onclick="" iconCls="icon-edit">修改</div>
         </div>
    
         <input type="button" value="按钮" onclick="abc()">
      </body>
    </html>

//扩展dateTimeBox
    $.extend($.fn.datagrid.defaults.editors,{
        datetimebox:{
            init:function(container,options){
               var input = $('<input type="text">').appendTo(container);
               options.editable = false;
               input.datetimebox(options);
               return input;
             },
            getValue:function(target){
                return $(target).datetimebox('getValue');
             },
            setValue:function(target){
               $(target).datetimebox('setValue',value);
             },
            resize:function(target){
               $(target).datetimebox('reSize',width);
             },
            destory:function(target){
               $(target).datetimebox('destory');           
             },
        }
    });
    
    $(function(){
          
          obj = {
           editRow:undefined,
           search:function(){
                $('#box').datagrid('load',{
                user:$.trim($('input[name="user"]').val()),
                date_from:$('input[name="date_from"]').val(),
                date_to:$('input[name="date_to"]').val();
           });
          },
           add:function(){
            $('#save,#redo').show();
    
           /*
             //当前页行结尾添加
            $('#box').datagrid('appendRow',{
                   user:'bnbbs',
                   email:'bnbbs@163.com',
                   data:'2014-11-11',
         });
          */
    
             if(this.editRow == undefined){
    
            //添加一行
            $('#box').datagrid('insertRow',{
                index:0,
                row:{
                   /*
                   user:'bnbbs',
                   email:'bnbbs@163.com',
                   data:'2014-11-11', 
                   */       
              }
          });
    
             //将第一行设置为可编辑状态。
             $('#box').datagrid('beginEdit',0);
             this.editRow = 0;     
           }
        },
    
         save:function(){
            //这两句不应该放这里，应该是保存成功之后在执行。
            //$('#save,#redo').hidden();
            //$('#box').dategrid('rejectChanges');
            //将第一行设置为结束编辑状态。
             $('#box').datagrid('endEdit',this.editRow);        
         },
    
         redo:function(){
            $('#save,#redo').hidden();
            $('#box').dategrid('rejectChanges');
            this.editRow = undefined;
         },
    
         edit:function(){
            var rows = $('#box').datagrid('getSelections');
            if(rows.length == 1){
    
              if(this.editRow != undefined){
                 $('#box').datagrid('endEdit',this.editRow);
               }
    
              if(this.editRow == undefined){
                 var index = $('#box').datagrid('getRowIndex',rows[0]);
                 $('#save,#redo').show();
                 $('#box').datagrid('beginEdit',index);
                 this.editRow = index;
                 $('#box').datagrid('unselectRow',index);             
               } 
    
             }else{
               $.messager.alert('警告','修改必须或只能选择一行','warning');
             }    
         },
    
         remove:function(){
            var rows = $('#box').datagrid('getSelections');
            if(rows.length > 0){
              $.messager.infirm('确定操作','你正在要删除所选的记录吗？',function(flag){
                 if(flag){
                   var ids = [];
                   for(var i= 0;i<rows.length;i++){
                       ids.push(rows[i].id);
                    }
                     console.log(ids.join(','));
    
                    $.ajax({
                         type:'POST',
                         url:'delete.php',
                         data:{
                           ids:ids.join(','),
                        },
                         beforeSend:function(){
                             $('#box').datagrid('loading');
                        },
                         success:function(data){
                            if(data){
                             $('#box').datagrid('loaded');
                             $('#box').datagrid('load');  
                             $('#box').datagrid('unselectAll'); 
                             $.messager.show({
                               title:'提示',
                               msg:data + '个用户被删除！',
                              });                         
                            }
                        },
                     });
                  }
               });  
            }else{
              $.messager.alert('提示','请选择要删除的记录！','info');
           }
         },     
       };
    
         $('#box').datagrid({
            width:600,
            //url:'content.json',
            url:'user.php',
            title:'用户列表',
            iconCls:'icon-search',
            striped:true,
            nowrap:true,
            rownumbers:true,
            //singleSelect:true, 
            
            /*
            fitColumns:true,
            frozenColumns:[[
             {
                   field:'id',
                   title:'编号',
                   sortable:true,
                   width：100,
                   checkbox:true,
                 },
                 {
                   field:'user',
                   title:'账号',
                   sortable:true,
                   width：100, 
                   editor:{
                     type:'validatebox',
                     options:{
                          required:true,
                      },
                    },             
                 },
             ]],
             */
            fitColumns:false,
            columns:[[
                 {
                   field:'id',
                   title:'编号',
                   sortable:true,
                   width：100,
                   checkbox:true,
                 },
                 {
                   field:'user',
                   title:'账号',
                   sortable:true,
                   width：100, 
                   editor:{
                     type:'validatebox',
                     options:{
                          required:true,
                      },
                    }, 
                  formatter:function(value,rowData,rowIndex){
                      return '[' + value + ']';
                   },            
                 },
                 {
                   field:'email',
                   title:'邮箱',
                   sortable:true, 
                   width：100,
                   editor:{
                     type:'validatebox',
                     options:{
                          required:true,
                          validType:'email',
                      },
                    },                
                 },
                 {
                   field:'date',
                   title:'注册时间',
                   sortable:true,
                   width：100,
                   editor:{
                     type:'datebox',
                     options:{
                          required:true,
                      },
                    }, 
      
                 },
          ]],
            toolbar:'#tb',        
            pagination:true,
            pageSize:10,
            pageList:[10,20,30],
            pageNumber:1,
            pagePosition:'top',
            pagePosition:'both',
            pagePosition:'bottom',
            sortName:'date',
            sortOrder:'DESC',
    
            onDblClickRow:function(rowIdex,rowData){
    
             if(obj.editRow != undefined){
              $('#box').datagrid('endEdit',obj.editRow);
            }
    
             if(obj.editRow == undefined){
              $('#save,#redo').show();
              $('#box').datagrid('beginEdit',rowIndex);
              obj.editRow = rowIndex;
      }         
    },
            onAfterEdit:function(rowIndex,rowData,changes){
             $('#save,#redo').hidden();
    
             var inserted = $('#box').datagrid('getChanges','inserted');
             var updated = $('#box').datagrid('getChanger','updated');
    
             var url = info ='';
             
             //新增用户
             if(inserted.length > 0){
               url:'add.php',
               info:'新增', 
            }
    
            //修改用户
             if(updated.length > 0){
                url:'update.php',
               info:'修改',                 
           }
    
               $.ajax({
                         type:'POST',
                         url:url,
                         data:{
                           row:rowData,
                        },
                         beforeSend:function(){
                             $('#box').datagrid('loading');
                        },
                         success:function(data){
                            if(data){
                             $('#box').datagrid('loaded');
                             $('#box').datagrid('load');  
                             $('#box').datagrid('unselectAll'); 
                             $.messager.show({
                               title:'提示',
                               msg:data + '个用户被'+info+'成功！',
                              });
                              obj.editRow = undefined;                         
                            }
                        },
                     });
              //console.log(rowDate);
       },
    
       onHeadContextMenu:function(e,filed){
          //alert("右击标题");
          console.log(filed);
      }
    
      onRowContextMenu:function(e,rowIndex,rowData){
         e.preventDefault(),
         //console.log(rowIdex),
          console.log(rowData),
    
        $('#menu').menu('show',function(){
               left:e.pageX,
               top:e.pageY,
        });
      }
    
      onClickRow:function(){
        alert('单击一行的时候触发！');
      },
    
      onClickCell:function(rowIndex,field,rowdata){
        alert('单击一个单元格的时候触发！'+field);
     },
    
      onUnselect:function(){
      alert('取消时触发！');
     },
    
     onCheck:function(){
       alert('勾选时触发！');
    },
     
    onCancelEdit:function(){
      alert('取消编辑时触发！');
     }, 
    
    onSortColumn:function(sort,order){
      alert('选择排序时触发！'+sort+order);
    },
     
    });
    
    function abc(){
       //$('#box').datagrid('deleteRow',0);
       //$('#box').datagrid('checkAll');
       //$('#box').datagrid('highlightRow',0);
       //$('#box').datagrid('mergeCells',{
           index:0,
           field:'user',
           //rowspan:5,
           //colspan:3,
        });
       
    }

[
      {
       "user":"蜡笔小新",
       "emial":"xiaoxin@163.com",
       "date":"2014-10-01",
      },
      {
       "user":"樱桃小丸子",
       "emial":"xiaowanzi@163.com",
       "date":"2014-10-02",
      },
      {
       "user":"黑崎一护",
       "emial":"yihu@163.com",
       "date":"2014-10-03",
      },
    ]

<?php
       header('Content-Type:text/html;chartset=utf-8');
       define('DB_HOST','localhost');
       define('DB_USER','root');
       define('DB_PWD','123456');
       define('DB_NAME','thinkphp');    
    
      $conn = @mysql_connect(DB_HOST,DB_USER,DB_PWD)or die('数据库连接失败：'.mysql_error());
    
      @mysql_select_db(DB_NAME)or die('数据库错误：'.mysql_error());
    
      @mysql_query('SET NMAES UTF8')or die('字符集错误：'.mysql_error());
    ?>

<?php
    
       //记得是：user.php
    
       require 'config.hph';
    
       $page = $_POST['page'];
       $pageSize = $_POST['row'];
       $first = $pageSize * ($page - 1);
    
       $order = $_POST['order'];
       $sort = $_POST['sort'];
       
       $sql = '';
       $user = '';
    
       $datefrom = '';
       $dateto = '';
    
       if(isset($_POST['user']) && !empty($_POST['user'])){
        $user = "user LINK '%{$_POST['user']}%' AND ";
        $sql .= $user;
      }
    
       if(isset($_POST['$datefrom']) && !empty($_POST['$datefrom'])){
        $datefrom = "date >='{$_POST['$datefrom']}' AND ";
        $sql .= $datefrom;
      }
    
    
       if(isset($_POST['$dateto']) && !empty($_POST['$dateto'])){
        $dateto = "date <='{$_POST['$dateto']}' AND ";
        $sql .= $dateto;
      }
    
    
       if(!empty($sql)){
         sql = 'WHERE '.substr($sql,0,-4);
       }
    
    
       $query = mysql_query("SELECT id,user,email,data FROM think_user $sql ORDER BY $order $sort LIMIT $first,$pageSize") or die('SQL 错误！');
       $total = mysql_num_rows(mysql_query("SELECT id,user,email,data FROM think_user $sql"));
       
       $json ='';
    
       while (!!$row = mysql_fetch_array($query,MYSQL_ASSOC)){
          $json .= json_encode($row).',';
        }
         
       
       echo '{"total":'.$total.',"rows":['.$json.'],"footer":[{"user":"统计","email":"统计","date":"统计"}]}'; 
    
       $json  = substr($json,0,-1);
    
    
       mysql_close();
    ?>

<?php
    
       //记得是：delete.php
    
       require 'config.hph';
    
       $ids = $_POST['ids'];
    
       mysql_query("DELETE FROM think_user WHERE id IN ($ids)") or die('SQL 错误！');
    
       echo mysql_affected_rows();
    
       mysql_close();
    ?>

<?php
    
       //记得是：add.php
    
        require 'config.hph';
    
        $row = $_POST['row'];
        $user = $_row['user'];
        $email = $_row['email'];
        $date = $_row['date'];
    
       mysql_query("INSERT INTO think_user (user,email,date) VALUE ('$user','$email','$date') ") or die('SQL 错误！');
    
       echo mysql_affected_rows();
    
       mysql_close();
    
    ?>

<?php
    
       //记得是：update.php
    
        require 'config.hph';
    
        $row = $_POST['row'];
        $id = $_row['id'];
        $user = $_row['user'];
        $email = $_row['email'];
        $date = $_row['date'];
    
       mysql_query("UPDATE think_user SET user ='$user',email ='$email',date ='$date' where id='$id'") or die('SQL 错误！');
    
       echo mysql_affected_rows();
    
       mysql_close();
    
    ?>

作者：Roger\_CoderLife

链接：https://blog.csdn.net/Roger\_CoderLife/article/details/103507367

本文根据[网易云课堂JQuery EasyUI视频教程][JQuery EasyUI]翻译成文档，转载请注明原文出处，欢迎转载

[JQuery EasyUI]: https://study.163.com/course/courseMain.htm?courseId=943002