下面通過(guò)本文給大家介紹下圖中的treegrid如何實(shí)現(xiàn)？
要求：動(dòng)態(tài)加載；級(jí)聯(lián)勾選；通關(guān)類型判斷顯示包庫(kù)/還是鏡像（列有所不同，鏡像共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,包庫(kù)；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對(duì)象 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)下包庫(kù)子節(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，由于是拼接比較繁雜，在此順便再說(shuō)一下傳參代碼
//新增產(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)，再獲取頁(yè)面中修改后的 //節(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功能，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)武林網(wǎng)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
