[Easyui TreeGrid]多行选中可编辑，再次单击退出编辑状态

最新推荐文章于 2023-05-04 11:58:26 发布

原创最新推荐文章于 2023-05-04 11:58:26 发布 · 4.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#easyui #treegrid #beginEdit #cancelEdit

Easyui 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了如何在Easyui TreeGrid上实现多行选中编辑功能，并且详细讲解了当再次单击时如何退出编辑状态。同时，提供了关于如何获取选中行的编辑数据以及在Editor列类型为combobox时获取combobox值的方法。

1、[Easyui TreeGrid]在上篇[Easyui Treegrid ]单行选中编辑的基础上，实现更为复杂的多行选中可编辑，再次单击退出编辑状态。
这里写图片描述
2、上代码
第一段代码：

<fieldset>
                <legend>顾客</legend>

                <div id="constomerTabs" data-options="border:false" class="easyui-tabs" style="width:550px;height: 240px;padding:5px;">

                    <div title="单次消费" data-options="closable:false" style="overflow:auto;padding:5px;display:none;">
                       <div id="single_con" class="easyui-panel"  style="width:100%;height:100%;"> 
                              <table id="conSingleProjTreeGrid"></table>
                       </div> 
                    </div>
                    <div title="tab2" data-options="closable:false" style="overflow:auto;padding:5px;display:none;">

                    </div>
                    <div title="tab3" data-options="closable:false" style="overflow:auto;padding:5px;display:none;">

                    </div>
                    <div title="tab4" data-options="closable:false" style="overflow:auto;padding:5px;display:none;">


                    </div>
                </div>

            </fieldset>

第二段代码：

<script type="text/javascript">

//单次消费
var conSingleProjTreeGrid = null;
var editIndex = undefined;

$(function() {
   //单次消费列表  
   conSingleProjTreeGrid = $('#conSingleProjTreeGrid').treegrid({
            url : "${pageContext.request.contextPath}/business/proj/queryAllEnableProjs.do?shopId=${shopId}",
            idField : 'id',
            treeField : 'categoryName',
            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 : 'categoryName',
                title : '项目大类',
                width : 136,
                align:'left'
            }, {
                field : 'name',
                title : '项目名称',
                width : 120,
                align:'center'
            }, {
                field : 'singlePrice',
                title : '单次价格',
                width : 80,
                align:'center',
                editor:{  
                    type:'numberspinner',  
                    options: {  
                        min:0 
                    }  
                }  
            }, {
                field : 'num',
                title : '数量',
                width : 60,
                align:'center',
                editor:{  
                    //可编辑状态，数字类型
                    type:'numberspinner',  
                    options: {  
                        min:0 
                    }  
                }
            }] ],
            onContextMenu : function(e, row) {
                 e.preventDefault();
                $(this).treegrid('unselectAll');
                $(this).treegrid('select', row.id);
            },
            //当取消选中行
            onUnselect : function(rowIndex, rowData){
                //保存每一行的选中状态
                var map = {};
                //遍历每一行的checkbox,获取每一行的选中状态，并存放在map中
                $('#single_con input:checkbox').each(function(index,el){
                    map[index] = this.checked;
                }); 

                var rIndex = 0;
                //获取父节点
                var rows = conSingleProjTreeGrid.treegrid('getRoots');
                for ( var i = 0; i < rows.length; i++) {
                    rIndex++;
                    //根据父节点，获取子节点
                    var children = conSingleProjTreeGrid.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为都不可编辑，也就是不可手动选中
                $('#single_con input:checkbox').each(function(index,el){
                     el.disabled=true;
                }); 
            },
            //当点击选中行
            onSelect : function(rowIndex, rowData){
                //保存每一行的选中状态
                var map = {};
                $('#single_con input:checkbox').each(function(index,el){
                    map[index] = this.checked;
                }); 

                var rIndex = 0;
                //获取父节点
                var rows = conSingleProjTreeGrid.treegrid('getRoots');
                for ( var i = 0; i < rows.length; i++) {
                    rIndex++;
                    //根据父节点,获取子节点
                    var children = conSingleProjTreeGrid.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不可以手动勾选
                $('#single_con input:checkbox').each(function(index,el){
                     el.disabled=true;
                }); 
            }
        }); 
});

</script>

3、获取选中行的编辑数据。

<script type="text/javascript">
   //获取选中行的编辑数据
   function getEditData(){
       //消费单次 conSingleProjTreeGrid  
       //获取已经被选中的行的集合
       var conSingleProjRows = conSingleProjTreeGrid.treegrid('getSelections');

        //消费单次明细（单次项目id、本次价格、数量）
        var conSingleProjIds = new Array();
        var conSingleProjPrices = new Array();
        var conSingleProjNums = new Array();

        for ( var j = 0; j < conSingleProjRows.length; j++) {
            //第一种方法：通过getEditor方法获取消费了哪些单次消费，每个单次消费的数量和价格
            /* var conSingleEditNum = conSingleProjTreeGrid.treegrid('getEditor', {id:conSingleProjRows[j].id,field:'num'});
            var conSingleEditPrice = conSingleProjTreeGrid.treegrid('getEditor', {id:conSingleProjRows[j].id,field:'singlePrice'});
            var conSingleNum = conSingleEditNum.target.val();
            var conSinglePrice = conSingleEditPrice.target.val(); */

            //第二种方法：通过getEditor方法获取消费了哪些单次消费，每个单次消费的数量和价格
            var conSingleEdits = conSingleProjTreeGrid.treegrid('getEditors',conSingleProjRows[j].id);
            var conSinglePrice = conSingleEdits[0].target.val();
            var conSingleNum = conSingleEdits[1].target.val();

            conSingleProjIds[j] = conSingleProjRows[j].id;
            conSingleProjPrices[j] = conSinglePrice;
            conSingleProjNums[j] = conSingleNum;

        }

        //id
        alert(conSingleProjIds.join(','));
        //价格
        alert(conSingleProjPrices.join(','));
        //数量
        alert(conSingleProjNums.join(','));
   }

</script>

4、补充说明一下Easyui Treegrid Editor 列类型为combobox时，获取combobox值的方法。

{
                field : 'checkType',
                title : '盘存结果',
                width : 120,
                align:'center',
                editor:{  
                    type:'combobox',
                    options:{
                        required:true,  
                        editable:false,  
                        data:[  
                            {'id':'0','text':'盘亏'}, 
                            {'id':'1','text':'盘盈'}  
                            ],  
                        valueField:'id',  
                        textField:'text'
                    }
                }
            }

获取combobox值的代码

//获以treegrid
var stockCheckProductTreeGrid = f.find("#stockCheckProductTreeGrid");

//获取treegrid的选中行                        
var checkProductRows = stockCheckProductTreeGrid.treegrid('getSelections');

//遍历选中行
for ( var j = 0; j < checkProductRows.length; j++) {
       //得到编辑行
        var checkProductEdits = stockCheckProductTreeGrid.treegrid('getEditors',checkProductRows[j].id);
        //获取编辑行中combobox的值
        var checkType = checkProductEdits[0].target.combobox('getValue');

        alert(checkType);                           

}