EasyUIでのdataGridのインライン編集例の詳細説明

この記事は、EasyUI での dataGrid のインライン編集の実装コードを主に紹介するもので、困っている人は参考にしていただければ幸いです。

この js コードは他の人が書いたものなので、ベストではないかもしれませんが、他の人が最初に機能的な問題を解決するのに役立つなら素晴らしいと個人的には思います。少し修正して自分のプロジェクトで使用したので、共有するためにここに投稿します。バックエンドで使用される TinkPHP は、追加、削除、変更を確認するのが比較的簡単なので、ここでは掲載しません。私は怠け者なので、フロントデスクのレンダリングは投稿しません。

$(function () {
    var datagrid; //定义全局变量datagrid
    var editRow = undefined; //定义全局变量：当前编辑的行
    datagrid = TskupluAddPacket.datagrid({
        url: ThinkPHP['MODULE'] + '/Tskuplu/getPacketList', //请求的数据源
        iconCls: 'icon-save', //图标
        pagination: true, //显示分页
        pageSize: 15, //页大小
        pageList: [15, 30, 45, 60], //页大小下拉选项此项各value是pageSize的倍数
        fit: true, //datagrid自适应宽度
        fitColumn: false, //列自适应宽度
        striped: true, //行背景交换
        nowap: true, //列内容多时自动折至第二行
        border: false,
        idField: 'packetid', //主键
        sortName : 'packetid',                                  //排序字段
        sortOrder : 'desc',                  //排序方式
        columns: [[//显示的列
            {field: 'packetid', title: 'ID', width: 100, sortable: true, checkbox: true },
            { field: 'packunit', title: '包装单位', width: 100, sortable: true,
                editor: { type: 'validatebox', options: { required: true} }
            },
            { field: 'packqty', title: '包装细数', width: 100,
                editor: { type: 'validatebox', options: { required: true} }
            },
            { field: 'packspec', title: '包装规格', width: 100,
                editor: { type: 'validatebox', options: { required: true} }
            }
        ]],
        queryParams: { 
          pluid: $('#addpluid').val()
        }, //查询参数
        toolbar: [{ text: '添加', iconCls: 'icon-add', handler: function () {//添加列表的操作按钮添加，修改，删除等
            //添加时如果没有正在编辑的行，则在datagrid的第一行插入一行
            if (editRow == undefined) {                     
                datagrid.datagrid("insertRow", {
                    index: 0, // index start with 0
                    row: {}
                });          
                //将新插入的那一行开户编辑状态
                datagrid.datagrid("beginEdit", 0);
                //给当前编辑的行赋值
                editRow = 0;
            }
        }
        }, '-',
        { text: '删除', iconCls: 'icon-remove', 
          handler: function () {
             //删除时先获取选择行
             var rows = datagrid.datagrid("getSelections");
             //选择要删除的行
             if (rows.length > 0) {
                $.messager.confirm("提示", "你确定要删除吗?", function (r) {
                  if (r) {
                    var ids = [];
                    for (var i = 0; i < rows.length; i++) {
                      ids.push(rows[i].packetid);
                    }
                    //将选择到的行存入数组并用,分隔转换成字符串，
                    //本例只是前台操作没有与数据库进行交互所以此处只是弹出要传入后台的id
                    //alert(ids.join(&#39;,&#39;));
                    $.ajax({
                      url : ThinkPHP[&#39;MODULE&#39;] + &#39;/Tskuplu/deletePacket&#39;,
                      type : &#39;POST&#39;,
                      data : {
                        ids : ids.join(&#39;,&#39;)
                      },
                      beforeSend : function (){
                        $.messager.progress({
                          text : &#39;正在处理中...&#39;
                        });  
                      },
                      success : function (data){
                        $.messager.progress(&#39;close&#39;);
                        if (data >0){
                          datagrid.datagrid(&#39;reload&#39;);
                          $.messager.show({
                            title : &#39;操作提醒&#39;,
                            msg  : data + &#39;条数据被成功删除！&#39;
                          })
                        } else if( data == -999 ) {
                          $.messager.alert(&#39;删除失败&#39;, &#39;对不起，您没有权限！&#39;, &#39;warning&#39;);
                        } else {
                          $.messager.alert(&#39;删除失败&#39;, &#39;没有删除任何数据！&#39;, &#39;warning&#39;);
                        }
                      }
                    });                  
                  }
                });
             } else {
                $.messager.alert("提示", "请选择要删除的行", "error");
             } 
          }
        }, &#39;-&#39;,
        { text: &#39;修改&#39;, iconCls: &#39;icon-edit&#39;, 
          handler: function () {
            //修改时要获取选择到的行
            var rows = datagrid.datagrid("getSelections");
            //如果只选择了一行则可以进行修改，否则不操作
            if (rows.length == 1) {
              //当无编辑行时
              if (editRow == undefined) {
                //获取到当前选择行的下标
                var index = datagrid.datagrid("getRowIndex", rows[0]);
                //开启编辑
                datagrid.datagrid("beginEdit", index);
                //把当前开启编辑的行赋值给全局变量editRow
                editRow = index;
                //当开启了当前选择行的编辑状态之后，
                //应该取消当前列表的所有选择行，要不然双击之后无法再选择其他行进行编辑
                datagrid.datagrid("unselectAll");
              }
            }
          }
        }, &#39;-&#39;,
        { text: &#39;保存&#39;, iconCls: &#39;icon-save&#39;, 
          handler: function () {
             //保存时结束当前编辑的行，自动触发onAfterEdit事件如果要与后台交互可将数据通过Ajax提交后台
             datagrid.datagrid("endEdit", editRow); 
             editRow = undefined;
          }
        }, &#39;-&#39;,
        { text: &#39;取消编辑&#39;, iconCls: &#39;icon-redo&#39;, 
          handler: function () {
             //取消当前编辑行把当前编辑行罢undefined回滚改变的数据,取消选择的行
             editRow = undefined;
             datagrid.datagrid("rejectChanges");
             datagrid.datagrid("unselectAll");
          }
        }, &#39;-&#39;],
        onAfterEdit: function (rowIndex, rowData, changes) {
          //endEdit该方法触发此事件           
          //var row = datagrid.datagrid("getData").rows[rowIndex]; //获取某一行的值 
          var inserted = datagrid.datagrid(&#39;getChanges&#39;,&#39;inserted&#39;);
          var updated = datagrid.datagrid(&#39;getChanges&#39;,&#39;updated&#39;);
          if(inserted.length < 1 && updated.length <1){
            editRow = undefined;
            datagrid.datagrid(&#39;unselectAll&#39;);
            return;
          }
          var url = &#39;&#39;;
          if(inserted.length>0){
            url=ThinkPHP[&#39;MODULE&#39;] + &#39;/Tskuplu/addPacket&#39;;
          }
          if(updated.length>0){
            url=ThinkPHP[&#39;MODULE&#39;] + &#39;/Tskuplu/updatePacket&#39;;
          }
          $.ajax({
            url : url,
            type : &#39;POST&#39;,
            data : {
              &#39;pluid&#39;: $(&#39;#addpluid&#39;).val(),
              &#39;packetid&#39;:rowData.packetid,
              &#39;packunit&#39;:rowData.packunit,
              &#39;packqty&#39; :rowData.packqty,
              &#39;packspec&#39;:rowData.packspec
            },
            beforeSend : function (){
              $.messager.progress({
                text : &#39;正在处理中...&#39;
              })
            },
            success : function (data){
              $.messager.progress(&#39;close&#39;);
              if (data > 0){ 
                datagrid.datagrid("acceptChanges"); 
                $.messager.show({
                  title : &#39;操作提示&#39;,
                  msg : &#39;添加成功&#39;
                });      
                editRow = undefined;
                datagrid.datagrid("reload"); 
                $(&#39;#addcheck&#39;).val(1);
              } else if (data == -999) {
                $.messager.alert(&#39;添加失败&#39;, &#39;抱歉！您没有权限！&#39;, &#39;warning&#39;);
              } else {
                datagrid.datagrid("beginEdit",editRow); 
                $.messager.alert(&#39;警告操作&#39;, &#39;未知错误！请重新刷新后提交！&#39;, &#39;warning&#39;);
              }
              datagrid.datagrid("unselectAll"); 
            }
          });
          //////////////////                         
        },
        onDblClickRow: function (rowIndex, rowData) {
        //双击开启编辑行
          if (editRow == undefined) {
              datagrid.datagrid("beginEdit", rowIndex);
              editRow = rowIndex;
          }
        }
    });   
  });

関連する推奨事項:

Easyui Datagridカスタムボタン列の詳細な説明

データの各行にアクションボタンを追加するEasyUIのDataGridの例の詳細な説明

EasyUiコントロールのDatagridの詳細な説明

以上がEasyUIでのdataGridのインライン編集例の詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。