[Easyui Treegrid ]单行选中编辑

1、Easyui Treegrid 单行选中编辑，只能选中叶子节点。

单击另外一个叶子节点，另外一个叶子节点选中，并进行编辑状态，上个正在编辑的节点退出编辑状态，并且不选中。并且只能选中叶子节点。

2、上代码

第一段代码：

<div id="giveTabs" data-options="border:false" class="easyui-tabs" style="width:550px;height: 240px;padding:5px;">                    <div id="proj_div" title="项目" data-options="closable:false" style="display:none;padding:5px;">                       <div class="easyui-panel"  style="width:100%;height:100%;">                               <table id="giveProjTreeGrid"></table>                       </div>                    </div>                    <div title="tab2" data-options="closable:false" style="overflow:auto;padding:5px;display:none;">                       <div class="easyui-panel"  style="width:100%;height:100%;">                        </div>                    </div>                    <div title="tab3" data-options="iconCls:'icon-reload',closable:false" style="display:none;padding:20px;">                    </div>                    <div title="tab4" data-options="iconCls:'icon-reload',closable:false" style="display:none;padding:20px;">                    </div>                </div>

第二段代码：

<script type="text/javascript">    var giveProjTreeGrid = null;    var editProjIndex = undefined;    $(function() {        //项目列表        giveProjTreeGrid = $('#giveProjTreeGrid').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,            columns : [ [ {                title : 'id',                field : 'id',                checkbox : true            }, {                field : 'categoryName',                title : '项目大类',                width : 136,                align:'left'            }, {                field : 'name',                title : '项目名称',                width : 180,                align:'center'            }, {                field : 'num',                title : '赠送数量',                width : 120,                align:'center',                editor:'numberspinner'            }] ],            onContextMenu : function(e, row) {                 e.preventDefault();                $(this).treegrid('unselectAll');                $(this).treegrid('select', row.id);                $('#menu').menu('show', {                    left : e.pageX,                    top : e.pageY                });             },            onSelect : function(rowIndex, rowData){                var row = giveProjTreeGrid.treegrid('getSelected');                if (row){                    if(editProjIndex == undefined){                    //选中行进行编辑状态                        $(this).datagrid('beginEdit', row.id);                        //记住当前选中行                        editProjIndex = row.id;                    }else if(editProjIndex != row.id){                    //让上一个选中行退出编辑状态                        $(this).datagrid('cancelEdit', editProjIndex);                        //让当前选中行进行编辑状态                        $(this).datagrid('beginEdit', row.id);                        //记住当前选中行                        editProjIndex = row.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不可以手动勾选                $('#proj_div input:checkbox').each(function(index,el){                     el.disabled=true;                });             }        });    }); </script>

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

<script type="text/javascript">//获取选中那一行的编辑数据function getEditData(){//获取选中行var selProjRow =giveProjTreeGrid.treegrid('getSelected'); if(selProjRow){  var projEdit = giveProjTreeGrid.treegrid('getEditor', {id:selProjRow.id,field:'num'});    var projNum = projEdit.target.val();    var projId = selProjRow.id;    alert(projId);    alert(projNum);            }}</script>

4、设置TreeGrid默认选中根节点。
核以代码：

//获取treegrid根节点var node = $('#orgTreeGrid').treegrid('getRoot');//默认选中根节点$('#orgTreeGrid').treegrid('select', node.id);

注意：上面的代码是放在treegrid的onLoadSuccess中的。
全部代码：

orgTreeGrid = $('#orgTreeGrid').treegrid({            fit : true,            fitColumns : false,            border : false,            idField : 'id',            treeField : 'text',            parentField : 'pid',            remoteSort: false,            singleSelect:true,            checkOnSelect : true,            selectOnCheck : true,            nowrap : true,            showPageList:false,            columns : [ [ {                field : 'text',                title : '组织机构',                width : $(document).width() * 20 / 100             }            ]],            url : "${pageContext.request.contextPath}/system/organization/queryOrganizations.do",            onLoadSuccess : function() {                                                $(this).treegrid('clearChecked');                $(this).treegrid('clearSelections');                 //获取treegrid根节点                var node = $('#orgTreeGrid').treegrid('getRoot');                //默认选中根节点                $('#orgTreeGrid').treegrid('select', node.id);            },            onSelect : function(rowIndex, rowData){                var row = orgTreeGrid.treegrid('getSelected');                orgDataGrid.datagrid({                    url : "${pageContext.request.contextPath}/system/organization/queryOrganizations.do",                    queryParams : {pid:row.id}                });            },            loadFilter: function (data, parent) {                var opt = $(this).data().treegrid.options;                return treeFilter(data, opt);            }        });

其中loadFilter的作用是url请求返回的是List集合，是不包含chilren节点的，loadFilter将其转换为包含chilren节点的格式。
loadFilter函数如下：

/** * loadFilter: function (data, parent) { *  var opt = $(this).data().treegrid.options; *  return treeFilter(data, opt); * } *  * idField : 'id' * treeField : 'text'  //必须指定 * parentField : 'pid' //必须指定 * @param data * @param opt * @returns */function treeFilter(data, opt) {    var idField,    treeField,    parentField;    if (opt.parentField) {        idField = opt.idField || 'id';        treeField = opt.treeField || 'text';        parentField = opt.parentField;        var i,        l,        treeData = [],        tmpMap = [];        for (i = 0, l = data.length; i < l; i++) {            tmpMap[data[i][idField]] = data[i];        }        for (i = 0, l = data.length; i < l; i++) {            if (tmpMap[data[i][parentField]] && data[i][idField] != data[i][parentField]) {                if (!tmpMap[data[i][parentField]]['children'])                    tmpMap[data[i][parentField]]['children'] = [];                data[i]['text'] = data[i][treeField];                tmpMap[data[i][parentField]]['children'].push(data[i]);            } else {                data[i]['text'] = data[i][treeField];                treeData.push(data[i]);            }        }        return treeData;    }    return data;}