jQuery Easyui Treegrid实现显示checkbox功能

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

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

下面是具体代码：

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

去除滚动条，否则右边最后一列会自动多处一块 columns: [[ { title: '产品列表',field: 'CatalogName',width: 210 },{ title: '产品ID',field: 'CatalogId',hidden: true },{ title: '父产品ID',field: 'ParentId',{ title: '父产品名称',field: 'ParentName',{ title: '产品类型',field: 'ProductType',{ title: '是否为子节点',field: 'isLeaf',//备注：(1,是;0,否) { title: '是否为父节点',field: 'isParent',{ title: 'IsChecked',field: 'IsCheck',{ title: 'CurrentYearPrices',field: 'type1',{ title: 'MirrorCurrentYearPrices',field: 'type3',{ title: 'MirrorEarlyPrices',field: 'type4',{ title: 'MirrorPrevIoUs3YearPrices',field: 'type5',{ field: 'CurrentYearPrices',title: '当前价格',width: 200,hidden: ishowPack,formatter: function (value,rec,index) { var d = '' + (value != 0 ? value.substr(0,value.length - 2) : '0.00');

   return d;
  }
 },{
  field: 'MirrorCurrentYearPrices',hidden: ishowMirro,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.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-check<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a> tree-check<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>0"&gt;' + value + '</span>';
   return d;
  }
 },{
  field: 'MirrorPrev<a href="https://www.jb51.cc/tag/IoU/" target="_blank" class="keywords">IoU</a>s3YearPrices',title: '前阶段价格',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.isParent + ');" parent="MirrorPrevious3YearPrices' + rec.ParentId + '" isparent="' + rec.isParent + '" value="' + value + '" />' + value.substr(0,value.length - 2);
   return d;
  }
 },{
  field: 'MirrorEarlyPrices',title: '早期价格',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.isParent + ');" parent="MirrorEarlyPrices' + rec.ParentId + '" isparent="' + rec.isParent + '" value="' + value + '" />' + value.substr(0,{
  field: 'type0',title: '是否赠送',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.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()级联方法

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); showProductTree($(this),$(this).attr('catalogid'),$(this).attr('isparent')) } if (state) { $(this).removeAttr('disabled'); } }); $(obj).prop('checked',state); disabledOthersCatalogType($(obj),catalogtype) } else { var state = $(obj).attr('checked') == undefined ? false : true; //alert(state); //alert(catalogtype); disabledOthersCatalogType($(obj),catalogtype) updateParentNodeCheckState($(obj),catalogtype) } } //修改其他产品类型的checkBox的只读状态 function disabledOthersCatalogType(obj,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,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,catalogtype) //继续查找上一层节点 updateParentNodeCheckState(parent,catalogtype) }

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

Box').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() + "\",\"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 功能。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。

原文链接：https://www.f2er.com/jquery/37296.html

jQuery Easyui Treegrid实现显示checkbox功能

总结

猜你在找的jQuery相关文章