easyui treegrid实现显示checkbox详解
简单的treegrid自带的checkbox的json拼接，api可直接找到，不在赘述，在此说说下图中的treegrid如何实现呢
要求：动态加载；级联勾选；通关类型判断显示包库/还是镜像（列有所不同，镜像共4列），勾选一个复选框，后面的复选框变为不可勾选状态。
下面是具体代码：
1，初始化treegrid，（其中有几个type列，是由后台人员提供的字段名，虽然我也不想弄一堆type...汗）
1 var root = 20543; 2 //初始化产品树 3 function InitProductTreeGrid(rootid) { 4 var type = '<%=Controler.ProductType%>'; 5 var ishowPack = true; 6 var ishowMirro = true; 7 //1,包库；2，镜像 8 if (type == '1') { 9 ishowPack = false; 10 ishowMirro = true; 11 } else { 12 ishowPack = true; 13 ishowMirro = false; 14 }; 15 $('#tt_Product').treegrid({ 16 url: '../Handlers/Contract_ProductHandler.ashx', 17 queryParams: { 18 handlertype: "InitProductTreeGrid", 19 ContractId: $('#ContractId').val(), 20 CatalogId: rootid, 21 pindex: $('#pindex').val() 22 }, 23 idField: 'id', 24 width: 930, 25 treeField: 'CatalogName', 26 fitColumns: true, //宽度自适应窗口 27 rownumbers: false, //是否加行号 28 singleSelect: true, 29 scrollbarSize: 0, //去除滚动条，否则右边最后一列会自动多处一块 30 columns: [[ 31 { title: '产品列表', field: 'CatalogName', width: 210 }, 32 { title: '产品ID', field: 'CatalogId', hidden: true }, 33 { title: '父产品ID', field: 'ParentId', hidden: true }, 34 { title: '父产品名称', field: 'ParentName', hidden: true }, 35 { title: '产品类型', field: 'ProductType', hidden: true }, 36 { title: '是否为子节点', field: 'isLeaf', hidden: true }, //备注：(1,是;0,否) 37 { title: '是否为父节点', field: 'isParent', hidden: true }, 38 { title: 'IsChecked', field: 'IsCheck', hidden: true }, 39 { title: 'CurrentYearPrices', field: 'type1', hidden: true }, 40 { title: 'MirrorCurrentYearPrices', field: 'type3', hidden: true }, 41 { title: 'MirrorEarlyPrices', field: 'type4', hidden: true }, 42 { title: 'MirrorPrevious3YearPrices', field: 'type5', hidden: true }, 43 { 44 field: 'CurrentYearPrices', title: '当前价格', width: 200, hidden: ishowPack, 45 formatter: function (value, rec, index) { 46 var d = '<input type="checkbox" name="CurrentYearPrices" catalogid="' + rec.CatalogId + '" ' + (rec.type1 == 'True' ? 'checked="checked"' : '') + ' id="CurrentYearPrices' + rec.CatalogId + '" onclick="showProductTree(this,\'CurrentYearPrices\',' + rec.CatalogId + ',' + rec.isParent + ');" parent="CurrentYearPrices' + rec.ParentId + '" isparent="' + rec.isParent + '" value="' + value + '" /> ' + (value != 0 ? value.substr(0, value.length - 2) : '0.00'); 47 48 52 return d; 53 } 54 }, 55 { 56 field: 'MirrorCurrentYearPrices', title: '当前价格', width: 200, hidden: ishowMirro, 57 formatter: function (value, rec, index) { 58 var d = '<input type="checkbox" name="MirrorCurrentYearPrices" catalogid="' + rec.CatalogId + '" ' + (rec.type3 == 'True' ? 'checked="checked"' : '') + ' id="MirrorCurrentYearPrices' + rec.CatalogId + '" onclick="showProductTree(this,\'MirrorCurrentYearPrices\',' + rec.CatalogId + ',' + rec.isParent + ');" parent="MirrorCurrentYearPrices' + rec.ParentId + '" isparent="' + rec.isParent + '" value="' + value + '" /> ' + value.substr(0, value.length - 2); 59 //var d = '<span name="CurrentYearMirrorPrice" id="CurrentYearMirrorPrice' + rec.CatalogId + '" class="tree-checkbox tree-checkbox0">' + value + '</span>'; 60 return d; 61 } 62 }, 63 { 64 field: 'MirrorPrevious3YearPrices', title: '前阶段价格', width: 200, hidden: ishowMirro, 65 formatter: function (value, rec, index) { 66 var d = '<input type="checkbox" name="MirrorPrevious3YearPrices" catalogid="' + rec.CatalogId + '" ' + (rec.type5 == 'True' ? 'checked="checked"' : '') + ' id="MirrorPrevious3YearPrices' + rec.CatalogId + '" onclick="showProductTree(this,\'MirrorPrevious3YearPrices\',' + rec.CatalogId + ',' + rec.isParent + ');" parent="MirrorPrevious3YearPrices' + rec.ParentId + '" isparent="' + rec.isParent + '" value="' + value + '" /> ' + value.substr(0, value.length - 2); 67 return d; 68 } 69 }, 70 { 71 field: 'MirrorEarlyPrices', title: '早期价格', width: 200, hidden: ishowMirro, 72 formatter: function (value, rec, index) { 73 var d = '<input type="checkbox" name="MirrorEarlyPrices" catalogid="' + rec.CatalogId + '" ' + (rec.type4 == 'True' ? 'checked="checked"' : '') + ' id="MirrorEarlyPrices' + rec.CatalogId + '" onclick="showProductTree(this,\'MirrorEarlyPrices\',' + rec.CatalogId + ',' + rec.isParent + ');" parent="MirrorEarlyPrices' + rec.ParentId + '" isparent="' + rec.isParent + '" value="' + value + '" /> ' + value.substr(0, value.length - 2); 74 return d; 75 } 76 }, 77 { 78 field: 'type0', title: '是否赠送', width: 200, 79 formatter: function (value, rec, index) { 80 //alert(rec.isPresent); 81 var d = '<input type="checkbox" name="IsPresent" catalogid="' + rec.CatalogId + '" ' + (rec.type0 == 'True' ? 'checked="checked"' : '') + ' id="IsPresent' + rec.CatalogId + '" onclick="showProductTree(this,\'IsPresent\',' + rec.CatalogId + ',' + rec.isParent + ');" parent="IsPresent' + rec.ParentId + '" isparent="' + rec.isParent + '" value="0" /> '; 82 return d; 83 } 84 } 85 ]], 86 loadFilter: function (data, parentId) { 87 //逐层加载 88 function setData() { 89 var todo = []; 90 for (var i = 0; i < data.length; i++) { 91 todo.push(data[i]); 92 } 93 while (todo.length) { 94 var node = todo.shift(); 95 if (node.children) { 96 node.state = 'closed'; 97 node.children1 = node.children; 98 node.children = undefined; 99 todo = todo.concat(node.children1); 100 } 101 } 102 } 103 setData(data); 104 var tg = $(this); 105 var opts = tg.treegrid('options'); 106 opts.onBeforeExpand = function (row) { 107 if (row.children1) { 108 tg.treegrid('append', { 109 parent: row[opts.idField], 110 data: row.children1 111 }); 112 row.children1 = undefined; 113 tg.treegrid('expand', row[opts.idField]); 114 } 115 return row.children1 == undefined; 116 }; 117 return data; 118 }, 119 onLoadSuccess: function (row, data) { 120 //alert(data[0].CatalogId) 121 RelativeTreeGridCheck(); 122 } 123 }); 124 };
2，onLoadSuccess中的RelativeTreeGridCheck()级联方法
1 var parentcid; 2 var ispid; 3 var tempid; 4 //父节点选中关联子节点选中 5 function RelativeTreeGridCheck() { 6 var rows = $('#addProductTbl').find('.datagrid-view2 .datagrid-body .datagrid-btable tr'); 7 for (var i = 0; i < rows.length; i++) { 8 if ($(rows).eq(i).attr('node-id') != undefined) { 9 parentcid = ""; 10 ispid = -1; 11 tempid = ""; 12 catalogid = $(rows).eq(i).attr('node-id'); 13 //alert(catalogid); 14 var cols = $(rows).eq(i).find('td'); 15 var fields = ''; 16 for (var j = 0; j < cols.length; j++) { 17 fields = $(cols).eq(j).attr('field'); 18 //alert('fields:' + fields); 19 switch (fields) { 20 case 'CurrentYearPrices': 21 case 'MirrorCurrentYearPrices': 22 case 'MirrorPrevious3YearPrices': 23 case 'MirrorEarlyPrices': 24 case 'type0': 25 if ($(cols).eq(j).find('div input:checked').length > 0) { 26 parentcid = $(cols).eq(j).parent().find("td[field='CatalogId']").find('div').html(); 27 ispid = $(cols).eq(j).parent().find("td[field='isParent']").find('div').html(); 28 contractproducttype = $(cols).eq(j).find('div input').attr('name'); 29 if (ispid == '1') { 30 //获取checkbox对象 31 var obj = $(cols).eq(j).find('div input:checkbox'); 32 //如果父节点选中，自己点也连带选中 33 showProductTree(obj, contractproducttype, parentcid, ispid) 34 } 35 } 36 break; 37 } 38 } 39 } 40 } 41 }
1 function showProductTree(obj, catalogtype, id, isparent) { 2 //alert(id.indexof('2')); 3 4 5 if (isparent == 1) { 6 //当前节点下包库子节点 7 8 //alert('$(obj).attr(checked)' + $(obj).attr('checked')); 9 var state = $(obj).attr('checked') == undefined ? false : true; 10 //alert('state:'+state+' id:'+id); 11 12 //找出子节点 13 var nodes = $('input[name="' + catalogtype + '"][parent="' + catalogtype + id + '"]'); 14 15 nodes.each(function () { 16 //alert('$(this).attr(checked):' + $(this).attr('checked')); 17 var curobjstate = $(this).attr('checked') == undefined ? false : true; 18 19 disabledOthersCatalogType($(this), state, catalogtype) 20 //alert('curobjstate:' + curobjstate + ' state:' + state + ' id:' + id + ' isparent: ' + $(this).attr('isparent')); 21 if (curobjstate == state && $(this).attr('isparent') == '0') { 22 //alert('leaf'); 23 //如果当前节点的选中状态和父节点不同，并且当前节点不是父节点 24 $(this).attr('checked', state); 25 $(this).prop('checked', state); 26 } else { 27 //alert('$(this).attr(catalogid)' + $(this).attr('catalogid') + '---$(this).attr(isparent)' + $(this).attr('isparent')); 28 $(this).attr('checked', state); 29 $(this).prop('checked', state); 30 showProductTree($(this), catalogtype, $(this).attr('catalogid'), $(this).attr('isparent')) 31 } 32 if (state) { 33 $(this).removeAttr('disabled'); 34 } 35 }); 36 37 $(obj).prop('checked', state); 38 39 disabledOthersCatalogType($(obj), state, catalogtype) 40 } else { 41 var state = $(obj).attr('checked') == undefined ? false : true; 42 //alert(state); 43 //alert(catalogtype); 44 disabledOthersCatalogType($(obj), state, catalogtype) 45 updateParentNodeCheckState($(obj), state, catalogtype) 46 } 47 } 48 //修改其他产品类型的checkbox的只读状态 49 function disabledOthersCatalogType(obj, state, catalogtype) { 50 $('input[catalogid="' + $(obj).attr('catalogid') + '"]').each(function () { 51 if ($(this).attr('name') != catalogtype) { 52 if (state) { 53 $(this).attr('disabled', 'disabled'); 54 } else { 55 $(this).removeAttr('disabled'); 56 } 57 $(this).attr('checked', false).prop('checked', false); 58 59 } 60 }); 61 } 62 //查找上一层节点,修改其状态 63 function updateParentNodeCheckState(obj, state, catalogtype) { 64 var pid = $(obj).attr('parent'); 65 66 //如果父节点是根节点，则不再执行 67 if (pid == catalogtype + root || $('#' + pid).length == 0) return; 68 var parent = $('#' + pid); 69 70 if (!state) { 71 //取消父节点的选中状态 72 parent.attr('checked', false) 73 parent.prop('checked', false) 74 } else { 75 //alert('pid:'+pid+'---'+$('input[parent="' + pid + '"]:checked').length+'------'+$('input[parent="' + pid + '"]').length); 76 //alert('checkedLen:' + $('input[parent="' + pid + '"]:checked').length + ' len:' + $('input[parent="' + pid + '"]').length); 77 //子节点全部选中 78 if ($('input[parent="' + pid + '"]:checked').length == $('input[parent="' + pid + '"]').length) { 79 parent.attr('checked', true); 80 parent.prop('checked', true); 81 } 82 } 83 //修改其他产品类型的checkbox的只读状态 84 disabledOthersCatalogType(parent, state, catalogtype) 85 //继续查找上一层节点 86 updateParentNodeCheckState(parent, state, catalogtype) 87 }
3，由于是拼接比较繁杂，在此顺便再说一下传参代码
1 //新增产品单击操作处理 2 function subAddProduct() { 5 var strJson = ''; 6 var selectedvalued = $('#cbo_selFirstCombbox').combobox('getValue'); 7 //下拉框选中的value 8 selectedvalued = selectedvalued == '' ? '20544' : selectedvalued; 9 // 10 var ids = '';
23 var rows = $('#addProductTbl').find('.datagrid-view2 .datagrid-body .datagrid-btable tr'); 24 strJson += "["; 25 26 for (var i = 0; i < rows.length; i++) { 27 catalogid = -1; 28 catalogname = ''; 29 productfather = -1; 30 contractproducttype = ''; 31 quoteprice = -1; 32 isfather = -1; 33 productfathername = ''; 34 if ($(rows).eq(i).attr('node-id') != undefined) { 35 36 catalogid = $(rows).eq(i).attr('node-id'); 37 //alert(catalogid); 38 var cols = $(rows).eq(i).find('td'); 39 var fields = ''; 40 for (var j = 0; j < cols.length; j++) { 41 fields = $(cols).eq(j).attr('field'); 42 //alert('fields:' + fields); 43 switch (fields) { 44 case 'CatalogName': 45 $(cols).eq(j).find('div span').each(function (index) { 46 if ($(cols).eq(j).find('div span').eq(index).hasClass('tree-title')) { 47 catalogname = $(cols).eq(j).find('div span').eq(index).html(); 48 } 49 }); 50 //alert(catalogname); 51 break; 52 case 'ParentId': 53 productfather = $(cols).eq(j).find('div').html(); 54 break; 55 case 'IsCheck': 56 //原树选中节点id的获取(不包含修改的id节点)，此步骤目的是为了配合后台方法，作用是先删除当前版本下所有树选中的节点，再获取页面中修改后的 57 //节点，进行更新操作 58 var oldcheck = $(cols).eq(j).find('div').html(); 59 if (oldcheck == 'True') { 60 var cid = $(cols).eq(j).parent().find("td[field='CatalogId']").find('div').html(); 61 ids += cid + ','; 62 //alert(ids) 63 } 64 break; 65 case 'CurrentYearPrices': 66 case 'MirrorCurrentYearPrices': 67 case 'MirrorPrevious3YearPrices': 68 case 'MirrorEarlyPrices': 69 case 'type0': 70 71 if ($(cols).eq(j).find('div input:checked').length > 0) { 72 isfather = $(cols).eq(j).parent().find("td[field='isParent']").find('div').html(); 73 productfathername = $(cols).eq(j).parent().find("td[field='ParentName']").find('div').html(); 74 contractproducttype = $(cols).eq(j).find('div input').attr('name'); 75 if (contractproducttype == 'IsPresent') { 76 var type = '<%=Controler.ProductType%>'; 77 contractproducttype = type == '1' ? 'CurrentYearPrices' : 'MirrorCurrentYearPrices'; //如果类型为镜像，则默认为镜像当年 78 //alert($(cols).eq(j).parent().find("td[field='" + contractproducttype + "']").find('div input').val()); 79 //quoteprice = 0; 80 quoteprice = $(cols).eq(j).parent().find("td[field='" + contractproducttype + "']").find('div input').val(); 81 ispresent = 1; 82 } else { 83 84 quoteprice = $(cols).eq(j).find('div input').val(); 85 ispresent = 0; 86 } 87 88 //alert('name:' + $(cols).eq(j).find('div input').attr('name') + ' value:' + $(cols).eq(j).find('div input').val()); 89 } 90 break; 91 92 } 93 94 } 95 96 //alert('catalogid:' + catalogid + '--catalogname:' + catalogname + '--productfather:' + productfather + '--contractproducttype:' + contractproducttype + '--quoteprice:' + quoteprice); 97 if (catalogid != -1 && catalogname != '' && productfather != -1 && contractproducttype != '' && quoteprice != -1 && productfathername != '') { 98 strJson += "{\"ProductID\":\"" + catalogid + "\",\"ContractProductType\":\"" + contractproducttype + "\",\"ProductFather\":\"" + productfather + "\",\"Productname\":\"" + catalogname + "\",\"Quotedprice\":\"" + quoteprice + "\",\"Oldproduct\":\"" + oldproduct + "\",\"IsPresent\":\"" + ispresent + "\",\"ContractID\":\"" + $('#ContractId').val() + "\",\"SelectedID\":\"" + selectedvalued + "\",\"IsParent\":\"" + isfather + "\",\"ProductFatherName\":\"" + productfathername + "\",\"IsNull\":\"0\"},"; 99 } 100 101 102 } 103 104 } 105 106 //alert(strJson); 107 if (strJson == '[') { 108 strJson = "[{\"ContractID\":\"" + $('#ContractId').val() + "\",\"SelectedID\":\"" + selectedvalued + "\",\"IsNull\":\"1\"}]"; 109 } else { 110 strJson = strJson.substr(0, strJson.length - 1); 111 strJson += "]"; 112 } 113 ids = ids.substr(0, ids.length - 1); 114 subProduct(strJson, ids); 115 //alert(rows.length); 116 } 117 //新增产品提交操作 118 function subProduct(strJson, ids) { 119 $.post('../Handlers/Contract_ProductHandler.ashx', { 'handlertype': 'subAddProduct', 'strJson': strJson, 'ids': ids, 'pindex': $('#pindex').val() }, function (responseData) {121 switch (responseData.Status) { 122 case "success": 123 //成功的操作 124 $.messager.alert('提示', responseData.Msg); 125 $('#ProductWinTree').window('close'); 126 //$('#selFirstCombbox').val('6774'); 127 $('#dg_Product').datagrid('reload'); 128 break; 129 case "failed": 130 //失败的操作 131 $.messager.alert('提示', responseData.Msg); 132 break; 133 } 134 }, 'json'); 135 }
自己也是菜鸟级别，摸索着写出来的，在此和大家分享一下，也做备忘之用，如有高手，不吝赐教，谢谢。
