jQuery Easyui Treegrid实现显示checkbox功能

下面通过本文给大家介绍下图中的treegrid如何实现？要求：动态加载；级联勾选；通关类型

下面通过本文给大家介绍下图中的treegrid如何实现？

要求：动态加载；级联勾选；通关类型判断显示包库/还是镜像（列有所不同，镜像共4列），勾选一个复选框，后面的复选框变为不可勾选状态。

下面是具体代码：

1，初始化treegrid，（其中有几个type列，是由后台人员提供的字段名，虽然我也不想弄一堆type...汗）

var root = 20543;
 //初始化产品树
 function InitProductTreeGrid(rootid) {
 var type = '<%=Controler.ProductType%>';
 var ishowPack = true;
 var ishowMirro = true;
 //1,包库；2，镜像
 if (type == '1') {
 ishowPack = false;
 ishowMirro = true;
 } else {
 ishowPack = true;
 ishowMirro = false;
 };
 $('#tt_Product').treegrid({
 url: '../Handlers/Contract_ProductHandler.ashx',
 queryParams: {
 handlertype: "InitProductTreeGrid",
 ContractId: $('#ContractId').val(),
 CatalogId: rootid,
 pindex: $('#pindex').val()
 },
 idField: 'id',
 width: 930,
 treeField: 'CatalogName',
 fitColumns: true, //宽度自适应窗口
 rownumbers: false, //是否加行号
 singleSelect: true,
 scrollbarSize: 0, //去除滚动条，否则右边最后一列会自动多处一块
 columns: [[
 { title: '产品列表', field: 'CatalogName', width: 210 },
 { title: '产品ID', field: 'CatalogId', hidden: true },
 { title: '父产品ID', field: 'ParentId', hidden: true },
 { title: '父产品名称', field: 'ParentName', hidden: true },
 { title: '产品类型', field: 'ProductType', hidden: true },
 { title: '是否为子节点', field: 'isLeaf', hidden: true }, //备注：(1,是;0,否)
 { title: '是否为父节点', field: 'isParent', hidden: true },
 { title: 'IsChecked', field: 'IsCheck', hidden: true },
 { title: 'CurrentYearPrices', field: 'type1', hidden: true },
 { title: 'MirrorCurrentYearPrices', field: 'type3', hidden: true },
 { title: 'MirrorEarlyPrices', field: 'type4', hidden: true },
 { title: 'MirrorPrevious3YearPrices', field: 'type5', hidden: true },
 {
 field: 'CurrentYearPrices', title: '当前价格', width: 200, hidden: ishowPack,
 formatter: function (value, rec, index) {
 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');

 return d;
 }
 },
 {
 field: 'MirrorCurrentYearPrices', title: '当前价格', width: 200, hidden: ishowMirro,
 formatter: function (value, rec, index) {
 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);
 //var d = '<span name="CurrentYearMirrorPrice" id="CurrentYearMirrorPrice' + rec.CatalogId + '" class="tree-checkbox tree-checkbox0">' + value + '</span>';
 return d;
 }
 },
 {
 field: 'MirrorPrevious3YearPrices', title: '前阶段价格', width: 200, hidden: ishowMirro,
 formatter: function (value, rec, index) {
 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);
 return d;
 }
 },
 {
 field: 'MirrorEarlyPrices', title: '早期价格', width: 200, hidden: ishowMirro,
 formatter: function (value, rec, index) {
 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);
 return d;
 }
 },
 {
 field: 'type0', title: '是否赠送', width: 200,
 formatter: function (value, rec, index) {
 //alert(rec.isPresent);
 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" />  ';
 return d;
 }
 }
 ]],
 loadFilter: function (data, parentId) {
 //逐层加载
 function setData() {
 var todo = [];
 for (var i = 0; i < data.length; i++) {
 todo.push(data[i]);
 }
 while (todo.length) {
 var node = todo.shift();
 if (node.children) {
 node.state = 'closed';
 node.children1 = node.children;
 node.children = undefined;
 todo = todo.concat(node.children1);
 }
 }
 }
 setData(data);
 var tg = $(this);
 var opts = tg.treegrid('options');
 opts.onBeforeExpand = function (row) {
 if (row.children1) {
 tg.treegrid('append', {
 parent: row[opts.idField],
 data: row.children1
 });
 row.children1 = undefined;
 tg.treegrid('expand', row[opts.idField]);
 }
 return row.children1 == undefined;
 };
 return data;
 },
 onLoadSuccess: function (row, data) {
 //alert(data[0].CatalogId)
 RelativeTreeGridCheck();
 }
 });
 };

2，onLoadSuccess中的RelativeTreeGridCheck()级联方法

var parentcid;
 var ispid;
 var tempid;
 //父节点选中关联子节点选中
 function RelativeTreeGridCheck() {
 var rows = $('#addProductTbl').find('.datagrid-view2 .datagrid-body .datagrid-btable tr');
 for (var i = 0; i < rows.length; i++) {
 if ($(rows).eq(i).attr('node-id') != undefined) {
 parentcid = "";
 ispid = -1;
 tempid = "";
 catalogid = $(rows).eq(i).attr('node-id');
 //alert(catalogid);
 var cols = $(rows).eq(i).find('td');
 var fields = '';
 for (var j = 0; j < cols.length; j++) {
 fields = $(cols).eq(j).attr('field');
 //alert('fields:' + fields);
 switch (fields) {
 case 'CurrentYearPrices':
 case 'MirrorCurrentYearPrices':
 case 'MirrorPrevious3YearPrices':
 case 'MirrorEarlyPrices':
 case 'type0':
 if ($(cols).eq(j).find('div input:checked').length > 0) {
 parentcid = $(cols).eq(j).parent().find("td[field='CatalogId']").find('div').html();
 ispid = $(cols).eq(j).parent().find("td[field='isParent']").find('div').html();
 contractproducttype = $(cols).eq(j).find('div input').attr('name');
 if (ispid == '1') {
 //获取checkbox对象
 var obj = $(cols).eq(j).find('div input:checkbox');
 //如果父节点选中，自己点也连带选中
 showProductTree(obj, contractproducttype, parentcid, ispid)
 }
 }
 break;
 }
 }
 }
 }
 }
function showProductTree(obj, catalogtype, id, isparent) {
 //alert(id.indexof('2'));
 if (isparent == 1) {
 //当前节点下包库子节点
 //alert('$(obj).attr(checked)' + $(obj).attr('checked'));
 var state = $(obj).attr('checked') == undefined ? false : true;
 //alert('state:'+state+' id:'+id);
 //找出子节点
 var nodes = $('input[name="' + catalogtype + '"][parent="' + catalogtype + id + '"]');
 nodes.each(function () {
 //alert('$(this).attr(checked):' + $(this).attr('checked'));
 var curobjstate = $(this).attr('checked') == undefined ? false : true;
 disabledOthersCatalogType($(this), state, catalogtype)
 //alert('curobjstate:' + curobjstate + ' state:' + state + ' id:' + id + ' isparent: ' + $(this).attr('isparent'));
 if (curobjstate == state && $(this).attr('isparent') == '0') {
 //alert('leaf');
 //如果当前节点的选中状态和父节点不同，并且当前节点不是父节点
 $(this).attr('checked', state);
 $(this).prop('checked', state);
 } else {
 //alert('$(this).attr(catalogid)' + $(this).attr('catalogid') + '---$(this).attr(isparent)' + $(this).attr('isparent'));
 $(this).attr('checked', state);
 $(this).prop('checked', state);
 showProductTree($(this), catalogtype, $(this).attr('catalogid'), $(this).attr('isparent'))
 }
 if (state) {
 $(this).removeAttr('disabled');
 }
 });
 $(obj).prop('checked', state);
 disabledOthersCatalogType($(obj), state, catalogtype)
 } else {
 var state = $(obj).attr('checked') == undefined ? false : true;
 //alert(state);
 //alert(catalogtype);
 disabledOthersCatalogType($(obj), state, catalogtype)
 updateParentNodeCheckState($(obj), state, catalogtype)
 }
 }
 //修改其他产品类型的checkbox的只读状态
 function disabledOthersCatalogType(obj, state, catalogtype) {
 $('input[catalogid="' + $(obj).attr('catalogid') + '"]').each(function () {
 if ($(this).attr('name') != catalogtype) {
 if (state) {
 $(this).attr('disabled', 'disabled');
 } else {
 $(this).removeAttr('disabled');
 }
 $(this).attr('checked', false).prop('checked', false);
 }
 });
 }
 //查找上一层节点,修改其状态
 function updateParentNodeCheckState(obj, state, catalogtype) {
 var pid = $(obj).attr('parent');
 //如果父节点是根节点，则不再执行
 if (pid == catalogtype + root || $('#' + pid).length == 0) return;
 var parent = $('#' + pid);
 if (!state) {
 //取消父节点的选中状态
 parent.attr('checked', false)
 parent.prop('checked', false)
 } else {
 //alert('pid:'+pid+'---'+$('input[parent="' + pid + '"]:checked').length+'------'+$('input[parent="' + pid + '"]').length);
 //alert('checkedLen:' + $('input[parent="' + pid + '"]:checked').length + ' len:' + $('input[parent="' + pid + '"]').length);
 //子节点全部选中
 if ($('input[parent="' + pid + '"]:checked').length == $('input[parent="' + pid + '"]').length) {
 parent.attr('checked', true);
 parent.prop('checked', true);
 }
 }
 //修改其他产品类型的checkbox的只读状态
 disabledOthersCatalogType(parent, state, catalogtype)
 //继续查找上一层节点
 updateParentNodeCheckState(parent, state, catalogtype)
 }

3，由于是拼接比较繁杂，在此顺便再说一下传参代码

//新增产品单击操作处理
 function subAddProduct() { 5 var strJson = '';
 var selectedvalued = $('#cbo_selFirstCombbox').combobox('getValue');
 //下拉框选中的value
 selectedvalued = selectedvalued == '' ? '20544' : selectedvalued;
 //
 var ids = ''; 
 var rows = $('#addProductTbl').find('.datagrid-view2 .datagrid-body .datagrid-btable tr');
 strJson += "[";
 for (var i = 0; i < rows.length; i++) {
 catalogid = -1;
 catalogname = '';
 productfather = -1;
 contractproducttype = '';
 quoteprice = -1;
 isfather = -1;
 productfathername = '';
 if ($(rows).eq(i).attr('node-id') != undefined) {
 catalogid = $(rows).eq(i).attr('node-id');
 //alert(catalogid);
 var cols = $(rows).eq(i).find('td');
 var fields = '';
 for (var j = 0; j < cols.length; j++) {
 fields = $(cols).eq(j).attr('field');
 //alert('fields:' + fields);
 switch (fields) {
 case 'CatalogName':
 $(cols).eq(j).find('div span').each(function (index) {
 if ($(cols).eq(j).find('div span').eq(index).hasClass('tree-title')) {
 catalogname = $(cols).eq(j).find('div span').eq(index).html();
 }
 });
 //alert(catalogname);
 break;
 case 'ParentId':
 productfather = $(cols).eq(j).find('div').html();
 break;
 case 'IsCheck':
 //原树选中节点id的获取(不包含修改的id节点)，此步骤目的是为了配合后台方法，作用是先删除当前版本下所有树选中的节点，再获取页面中修改后的
 //节点，进行更新操作
 var oldcheck = $(cols).eq(j).find('div').html();
 if (oldcheck == 'True') {
 var cid = $(cols).eq(j).parent().find("td[field='CatalogId']").find('div').html();
 ids += cid + ',';
 //alert(ids)
 }
 break;
 case 'CurrentYearPrices':
 case 'MirrorCurrentYearPrices':
 case 'MirrorPrevious3YearPrices':
 case 'MirrorEarlyPrices':
 case 'type0':
 if ($(cols).eq(j).find('div input:checked').length > 0) {
 isfather = $(cols).eq(j).parent().find("td[field='isParent']").find('div').html();
 productfathername = $(cols).eq(j).parent().find("td[field='ParentName']").find('div').html();
 contractproducttype = $(cols).eq(j).find('div input').attr('name');
 if (contractproducttype == 'IsPresent') {
 var type = '<%=Controler.ProductType%>';
 contractproducttype = type == '1' ? 'CurrentYearPrices' : 'MirrorCurrentYearPrices'; //如果类型为镜像，则默认为镜像当年
 //alert($(cols).eq(j).parent().find("td[field='" + contractproducttype + "']").find('div input').val());
 //quoteprice = 0;
 quoteprice = $(cols).eq(j).parent().find("td[field='" + contractproducttype + "']").find('div input').val();
 ispresent = 1;
 } else {
 quoteprice = $(cols).eq(j).find('div input').val();
 ispresent = 0;
 }
 //alert('name:' + $(cols).eq(j).find('div input').attr('name') + ' value:' + $(cols).eq(j).find('div input').val());
 }
 break;
 }
 }
 //alert('catalogid:' + catalogid + '--catalogname:' + catalogname + '--productfather:' + productfather + '--contractproducttype:' + contractproducttype + '--quoteprice:' + quoteprice);
 if (catalogid != -1 && catalogname != '' && productfather != -1 && contractproducttype != '' && quoteprice != -1 && productfathername != '') {
 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\"},";
 }
 }
 }
 //alert(strJson);
 if (strJson == '[') {
 strJson = "[{\"ContractID\":\"" + $('#ContractId').val() + "\",\"SelectedID\":\"" + selectedvalued + "\",\"IsNull\":\"1\"}]";
 } else {
 strJson = strJson.substr(0, strJson.length - 1);
 strJson += "]";
 }
 ids = ids.substr(0, ids.length - 1);
 subProduct(strJson, ids);
 //alert(rows.length);
 }
 //新增产品提交操作
 function subProduct(strJson, ids) {
 $.post('../Handlers/Contract_ProductHandler.ashx', { 'handlertype': 'subAddProduct', 'strJson': strJson, 'ids': ids, 'pindex': $('#pindex').val() }, function (responseData) {121 switch (responseData.Status) {
 case "success":
 //成功的操作
 $.messager.alert('提示', responseData.Msg);
 $('#ProductWinTree').window('close');
 //$('#selFirstCombbox').val('6774');
 $('#dg_Product').datagrid('reload');
 break;
 case "failed":
 //失败的操作
 $.messager.alert('提示', responseData.Msg);
 break;
 }
 }, 'json');
 }

总结

以上所述是小编给大家介绍的jQuery Easyui Treegrid实现显示checkbox功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！