Easyui 行编辑

之前没用过，突然用了的时候手忙脚乱的感觉找了官方文档也好百度了一大堆东西表示个人脑袋跟不上思路

直接铺上简化的以后自己找起来也方便以下代码已经执行应该不会再错了

    <table id="dataPackageMenuList" title="套餐菜品列表" class="easyui-datagrid" style="width:100%;height:100%"
                    toolbar="#toolbar1" pagination="true"
                    rownumbers="true" fitColumns="true" singleSelect="true">
                <thead>
                    <tr>
                        <th data-options="field:'id',hidden:true">ID</th>
                        <ks:listTag table="T_CATER_PACKAGEMENU" column="REMARKS"/>
                        <ks:listTag table="T_CATER_PACKAGEMENU" column="PACKAGEID"/>
                        <ks:listTag table="T_CATER_PACKAGEMENU" column="MENUID"/>
                        <th field="menuName" width="100px">菜品名</th>
                        <th field="menuPrice" width="100px">菜品价格</th>
                        <th field="menuNum" width="100px" data-options="editor:{type:'numberbox',options:{required:true}}">菜品数量</th> <!--需要编辑的行  -->
                        
                    </tr>
                </thead>
            </table>

JS部分

$("#dataPackageMenuList").datagrid({
                onAfterEdit:function(rowIndex,rowData){
                    //TODO 结束行编辑
                    editRow = undefined;
                    if(rowData.menuNum != packageMenuNum){    //这个if选择性无视 业务逻辑 
                        editPackageMenuNum.push({"id":rowData.id,"menuMum":rowData.menuNum});
                    } 
                },
                onClickRow:function(rowIndex,rowData){
                    //TODO 触发行编辑方法
                    packageMenuNum = rowData.menuNum;        //这个赋值也是业务逻辑 选择性无视
                    bookDataListRow(rowIndex);
                }
            });
        });
      //行编辑
      var editRow = undefined;
      function bookDataListRow(index){
            if(editRow!=undefined){    //判断编辑器是否处于打开状态
                var editors = $('#dataPackageMenuList').datagrid('getEditors', editRow);
                $('#dataPackageMenuList').datagrid('endEdit',editRow);
            }
            if(editRow==undefined){
                $('#dataPackageMenuList').datagrid('beginEdit',index);
                editRow=index;
            }
        }

效果图如下

Easyui 行编辑

推荐阅读