下面通过本文给大家介绍下图中的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">' + 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