jQuery Easyui Treegrid實(shí)現(xiàn)顯示checkbox功能
更新時(shí)間：2017年08月08日 17:01:07 作者：悲淚滿衣襟
本文通過實(shí)例代碼給大家介紹jQuery Easyui Treegrid實(shí)現(xiàn)顯示checkbox功能的方法，代碼簡單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下吧
下面通過本文給大家介紹下圖中的treegrid如何實(shí)現(xiàn)？
要求：動(dòng)態(tài)加載；級(jí)聯(lián)勾選；通關(guān)類型判斷顯示包庫/還是鏡像（列有所不同，鏡像共4列），勾選一個(gè)復(fù)選框，后面的復(fù)選框變?yōu)椴豢晒催x狀態(tài)。
下面是具體代碼：
1，初始化treegrid，（其中有幾個(gè)type列，是由后臺(tái)人員提供的字段名，雖然我也不想弄一堆type...汗）
var root = 20543;
//初始化產(chǎn)品樹
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, //寬度自適應(yīng)窗口
rownumbers: false, //是否加行號(hào)
singleSelect: true,
scrollbarSize: 0, //去除滾動(dòng)條，否則右邊最后一列會(huì)自動(dòng)多處一塊
columns: [[
{ title: '產(chǎn)品列表', field: 'CatalogName', width: 210 },
{ title: '產(chǎn)品ID', field: 'CatalogId', hidden: true },
{ title: '父產(chǎn)品ID', field: 'ParentId', hidden: true },
{ title: '父產(chǎn)品名稱', field: 'ParentName', hidden: true },
{ title: '產(chǎn)品類型', field: 'ProductType', hidden: true },
{ title: '是否為子節(jié)點(diǎn)', field: 'isLeaf', hidden: true }, //備注：(1,是;0,否)
{ title: '是否為父節(jié)點(diǎn)', 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: '當(dāng)前價(jià)格', 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: '當(dāng)前價(jià)格', 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: '前階段價(jià)格', 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: '早期價(jià)格', 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: '是否贈(zèng)送', 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()級(jí)聯(lián)方法
var parentcid;
var ispid;
var tempid;
//父節(jié)點(diǎn)選中關(guān)聯(lián)子節(jié)點(diǎn)選中
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');
//如果父節(jié)點(diǎn)選中，自己點(diǎn)也連帶選中
showProductTree(obj, contractproducttype, parentcid, ispid)
}
}
break;
}
}
}
}
}
function showProductTree(obj, catalogtype, id, isparent) {
//alert(id.indexof('2'));
if (isparent == 1) {
//當(dāng)前節(jié)點(diǎn)下包庫子節(jié)點(diǎn)
//alert('$(obj).attr(checked)' + $(obj).attr('checked'));
var state = $(obj).attr('checked') == undefined ? false : true;
//alert('state:'+state+' id:'+id);
//找出子節(jié)點(diǎn)
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');
//如果當(dāng)前節(jié)點(diǎn)的選中狀態(tài)和父節(jié)點(diǎn)不同，并且當(dāng)前節(jié)點(diǎn)不是父節(jié)點(diǎn)
$(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)
}
}
//修改其他產(chǎn)品類型的checkbox的只讀狀態(tài)
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);
}
});
}
//查找上一層節(jié)點(diǎn),修改其狀態(tài)
function updateParentNodeCheckState(obj, state, catalogtype) {
var pid = $(obj).attr('parent');
//如果父節(jié)點(diǎn)是根節(jié)點(diǎn)，則不再執(zhí)行
if (pid == catalogtype + root || $('#' + pid).length == 0) return;
var parent = $('#' + pid);
if (!state) {
//取消父節(jié)點(diǎn)的選中狀態(tài)
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);
//子節(jié)點(diǎn)全部選中
if ($('input[parent="' + pid + '"]:checked').length == $('input[parent="' + pid + '"]').length) {
parent.attr('checked', true);
parent.prop('checked', true);
}
}
//修改其他產(chǎn)品類型的checkbox的只讀狀態(tài)
disabledOthersCatalogType(parent, state, catalogtype)
//繼續(xù)查找上一層節(jié)點(diǎn)
updateParentNodeCheckState(parent, state, catalogtype)
}
3，由于是拼接比較繁雜，在此順便再說一下傳參代碼
//新增產(chǎn)品單擊操作處理
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':
//原樹選中節(jié)點(diǎn)id的獲取(不包含修改的id節(jié)點(diǎn))，此步驟目的是為了配合后臺(tái)方法，作用是先刪除當(dāng)前版本下所有樹選中的節(jié)點(diǎn)，再獲取頁面中修改后的
//節(jié)點(diǎn)，進(jìn)行更新操作
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'; //如果類型為鏡像，則默認(rèn)為鏡像當(dāng)年
//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);
}
//新增產(chǎn)品提交操作
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');
}
總結(jié)
以上所述是小編給大家介紹的jQuery Easyui Treegrid實(shí)現(xiàn)顯示checkbox功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
全面解析jQuery $(document).ready()和JavaScript onload事件
這篇文章主要介紹了全面解析jQuery $(document).ready()和JavaScript onload事件的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)員工管理注冊頁面，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
jquery對象和javascript對象即DOM對象相互轉(zhuǎn)換
對于已經(jīng)是一個(gè) DOM 對象，只需要用 $() 把DOM對象包裝起來，就可以獲得一個(gè) jQuery 對象了，使用[index]和.get(index)可以轉(zhuǎn)為DOM對象2014-08-08
這篇文章主要介紹了jquery mobile開發(fā)常見問題,結(jié)合實(shí)例形式分析了jQuery mobile插件使用過程中的常見錯(cuò)誤問題與對應(yīng)的解決方法,需要的朋友可以參考下2016-01-01
jQuery發(fā)布已經(jīng)十年了，挺讓人難以置信。過去的這些年Web開發(fā)變了很多，jQuery也隨之變化著。在這個(gè)過程中，團(tuán)隊(duì)一直在對確保過往代碼的兼容支持和獲取最好的Web開發(fā)實(shí)踐的現(xiàn)實(shí)之間努力著。就在2天前，jQuery發(fā)布了新的3.0最終版本2016-06-06
這篇文章主要為大家詳細(xì)介紹了jquery遍歷json對象集合、jQuery 遍歷JSON對象、jquery中遍歷讀取json串中的對象三種情況，感興趣的小伙伴們可以參考一下2016-05-05
這篇文章主要介紹了jquery.flot.js簡單繪制折線圖用法,結(jié)合實(shí)例形式分析了jQuery插件jquery.flot.js實(shí)現(xiàn)圖形繪制的常用操作技巧,需要的朋友可以參考下2017-03-03
jquery.jstree 增加節(jié)點(diǎn)的雙擊事件代碼
本文基于 jsTree 1.0-rc1 版本增加節(jié)點(diǎn)的雙擊事件。2010-07-07
使用JavaScript+canvas實(shí)現(xiàn)圖片裁剪
這篇文章主要介紹了使用JavaScript+canvas實(shí)現(xiàn)圖片裁剪的方法,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了關(guān)于jquery layui彈出層的使用方法,需要的朋友可以參考下2018-04-04