Easyui treegrid可编辑状态下动态设置numberspinner类型列的max

来源：互联网发布：北京程序员培训班编辑：程序博客网时间：2024/05/22 02:44
1、如下图下部中的领用单明细信息是一个treegrid,可以多行编辑，并要选中行的领用数量编辑的最大值为该行产品的库存数量。
这里写图片描述
2、实现
var exportbillProductTreeGrid = null;    $(function() {        //领用产品明细列表        exportbillProductTreeGrid = $('#exportbillProductTreeGrid').treegrid({            url : "${pageContext.request.contextPath}/business/product/queryAllEnableProducts.do?shopId=${shopId}",            idField : 'id',            treeField : 'brandName',            parentField : 'pid',            dataPlain: true,            fit : true,            striped : true,            fitColumns : false,            rownumbers :true,            border : false,            nowrap : false,            singleSelect : false,            checkOnSelect : true,            selectOnCheck : true,            columns : [ [ {                title : 'id',                field : 'id',                checkbox : true            }, {                field : 'brandName',                title : '品牌',                width : 120,                align:'left'            }, {                field : 'name',                title : '产品名称',                width : 120,                align:'center'            }, {                field : 'stockNum',                title : '库存数量',                width : 120,                align:'center'            }, {                field : 'num',                title : '领用数量',                width : 120,                align:'center',                editor:{                      type:'numberspinner',                      options: {                          max:10000000                     }                  }            }] ],            onContextMenu : function(e, row) {                e.preventDefault();                $(this).treegrid('unselectAll');                $(this).treegrid('select', row.id);                $('#menu').menu('show', {                    left : e.pageX,                    top : e.pageY                });             },            //当取消选中行            onUnselect : function(rowIndex, rowData){                 //保存每一行的选中状态                var map = {};                //遍历每一行的checkbox,获取每一行的选中状态，并存放在map中                $('#exportBill_div input:checkbox').each(function(index,el){                    map[index] = this.checked;                });                  var rIndex = 0;                //获取父节点                var rows = exportbillProductTreeGrid.treegrid('getRoots');                for ( var i = 0; i < rows.length; i++) {                    rIndex++;                    //根据父节点，获取子节点                    var children = exportbillProductTreeGrid.treegrid('getChildren',rows[i].id);                    //遍历子节点                    for ( var j = 0; j < children.length; j++) {                        rIndex++;                        //如果子节点是选中的，该行进行编辑状态                        if(map[rIndex]){                            $(this).datagrid('beginEdit', children[j].id);                        }else{                            //如果子节点不是选中的，退出编辑状态                             $(this).datagrid('cancelEdit', children[j].id);                        }                    }                }                //设置每一行的checkbox为都不可编辑，也就是不可手动选中                $('#exportBill_div input:checkbox').each(function(index,el){                     el.disabled=true;                });            },            //当点击选中行            onSelect : function(rowIndex, rowData){                //保存每一行的选中状态                var map = {};                $('#exportBill_div input:checkbox').each(function(index,el){                    map[index] = this.checked;                });                 var rIndex = 0;                //获取父节点                var rows = exportbillProductTreeGrid.treegrid('getRoots');                for ( var i = 0; i < rows.length; i++) {                    rIndex++;                    //根据父节点,获取子节点                    var children = exportbillProductTreeGrid.treegrid('getChildren',rows[i].id);                    for ( var j = 0; j < children.length; j++) {                        rIndex++;                        //如果子节点为选中，进行编辑状态                        if(map[rIndex]){                            $(this).datagrid('beginEdit', children[j].id);                        }else{                            //如果子节点没有选中，退出编辑状态                             $(this).datagrid('cancelEdit', children[j].id);                        }                    }                }              },            loadFilter: function (data, parent) {                var opt = $(this).data().treegrid.options;                return treeFilter(data, opt);            },              onBeforeSelect: function(node) {                  //只能选择产品行，不能选择品牌行  //只能选择叶子节点，不能选择非叶子节点                if(!node.name){                    return false;                }            },            onLoadSuccess:function(){                //加载成功后，checkbox不可以手动勾选                $('#exportBill_div input:checkbox').each(function(index,el){                     el.disabled=true;                });             },            //在激活编辑状态前            onBeforeEdit:function(node){                //获取要进入编辑状态的的数据行中的num可编辑列的option                var columnOption = exportbillProductTreeGrid.treegrid('getColumnOption',"num");                  //动态设置领用数量输入框的最大max为该产品的库存数量                columnOption.editor.options.max = node.stockNum;            }        });    });
主要代码：
这里写图片描述
阅读全文
0 0