easy-ui treegrid 實現分頁 而且添加自定義checkbox
首先第一點easy-ui treegrid 對分頁沒有好的實現，javascript
由於在分頁的過程當中是按照 根節點來分頁的 後臺只能先按照 根節點作分頁查詢 再將子節點關聯進去，css
這樣才能將treegrid 按照根節點來進行分頁. 或許也能按照子節點來進行分頁處理，可是這樣會將樹形結構破壞掉 ，本身沒有實現過子節點分頁的狀況。java
這裏重點講一下 根節點分頁，並實現checkbox 級聯勾選。json
一、先給你們看下效果圖
網絡
第一張圖是實現的treegrid,第二張圖是checkbox 的 treegrid app
能夠看到 第二張圖的級聯勾選 ， 你還可已自定義本身的勾選方法，具體問題具體實現。異步
二、接下來是代碼實現 jsonp
$(function() {
$('#peopleList').treegrid({
idField: 'id',
treeField: 'pname',
striped: 'true',
title: '扶貧對象列表',
url: url,
fit: true,
loadMsg: '數據加載中...',
pageSize: 200,
pagination: true,
pageList: [200, 300, 400],
sortOrder: 'asc',
rownumbers: true,
singleSelect: false,
fitColumns: false,
showFooter: true,
frozenColumns: [[
{
field: 'pname',
title: '姓名',
width: 140,
align: 'center',
sortable: true,
formatter: function(value, rec, index) {
var inputCheckBox = "<input type='checkbox' class='treeCheckBox' data-id = '"+ rec.id +"' data-parent-id = '"+rec.parentId+"'/>"
var href = "<a style='color:blue' href='#' onclick=detail('姓名','tBPPeopleController.do?goQueryPeople&id=" + rec.id + "')>";
return inputCheckBox + href + '<span class="easyui-tooltip" id="id_pname_' + index + '" title1="' + value + '">' + value + '</span></a>';
},
styler: function(value, rec, index) {
return 'background-color:#f4f4f4';
}
},
{
field: 'idCard',
title: '證件號碼',
width: 160,
align: 'center',
sortable: true,
styler: function(value, rec, index) {
return 'background-color:#f4f4f4';
},
formatter: function(value, rec, index) {
if (value) {
return '<span class="easyui-tooltip" id="id_idCard_' + index + '" title1="' + value + '">' + value + '</span>';
}
}
}
]],
columns: [[
{
field: 'id',
title: '主鍵',
width: 120,
hidden: true,
formatter: function(value, rec, index) {
if (value) {
return '<span class="easyui-tooltip" id="id_id_' + index + '" title1="' + value + '">' + value + '</span>';
} else if (value == 0) {
return '<span class="easyui-tooltip" id="id_id_' + index + '" title1="' + value + '">' + value + '</span>';
}
}
}
]],
onLoadError: function(data) {
if (data && data.responseText && data.responseText == 'noAuth') {
alert('沒有數據列表權限，請聯繫系統管理添加權限');
} else {
alert('獲取數據失敗，請從新登陸或檢查網絡！');
}
},
onBeforeLoad: function(params) {
try{
}catch(e){}
},
onLoadSuccess: function(data) {
//------------------自動生成的代碼
(function tooltip() {
xOffset = 5;
yOffset = 5;
$(".easyui-tooltip").each(function() {
$(this).hover(function(e) {
this.t = $(this).attr('title1');
this.title = "";
$("body").append("<p id='tooltip_'>" + this.t + "</p>");
$("#tooltip_").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px").fadeIn("fast");
},
function() {
this.title = this.t;
$("#tooltip_").remove();
});
});
$(".easyui-tooltip").each(function() {
$(this).mousemove(function(e) {
$("#tooltip_").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px");
});
});
})();
$("#peopleList").treegrid("clearSelections");
},
onClickRow: function(rowData){
//級聯選擇
$(this).treegrid('cascadeCheck',{
id:rowData.id, //節點ID
deepCascade:true //深度級聯
});
}
});
$('#peopleList').treegrid('getPager').pagination({
beforePageText: '',
afterPageText: '/{pages}',
displayMsg: '{from}-{to}共 {total}條',
showPageList: true,
showRefresh: true
});
$('#peopleList').treegrid('getPager').pagination({
onBeforeRefresh: function(pageNumber, pageSize) {
$(this).pagination('loading');
$(this).pagination('loaded');
}
});
});
function reloadTable() {
try {
$('#' + gridname).treegrid('reload');
} catch(ex) {}
}
function reloadpeopleList() {
$('#peopleList').treegrid('reload');
}
function getpeopleListSelected(field) {
return getSelected(field);
}
function getSelected(field) {
var row = $('#' + gridname).treegrid('getSelected');
if (row != null) {
value = row[field];
} else {
value = '';
}
return value;
}
function getpeopleListSelections(field) {
var ids = [];
var rows = $('#peopleList').treegrid('getSelections');
for (var i = 0; i < rows.length; i++) {
ids.push(rows[i][field]);
}
ids.join(',');
return ids
};
function getSelectRows() {
return $('#peopleList').treegrid('getSelections');
}
function peopleListsearch() {
var queryParams = $('#peopleList').treegrid('options').queryParams;
$('#peopleListtb').find('*').each(function() {
queryParams[$(this).attr('name')] = $(this).val();
});
$('#peopleList').treegrid({
url: url,
pageNumber: 1
});
}
function dosearch(params) {
var jsonparams = $.parseJSON(params);
$('#peopleList').treegrid({
url:url,
queryParams: jsonparams
});
}
function peopleListsearchbox(value, name) {
var queryParams = $('#peopleList').datagrid('options').queryParams;
queryParams[name] = value;
queryParams.searchfield = name;
$('#peopleList').treegrid('reload');
}
$('#peopleListsearchbox').searchbox({
searcher: function(value, name) {
peopleListsearchbox(value, name);
},
menu: '#peopleListmm',
prompt: '請輸入查詢關鍵字'
});
function EnterPress(e) {
var e = e || window.event;
if (e.keyCode == 13) {
peopleListsearch();
}
}
function searchReset(name) {
$("#" + name + "tb").find(":input").val("");
peopleListsearch();
}
/**
* 擴展樹表格級聯勾選方法：
* @param {Object} container
* @param {Object} options
* @return {TypeName}
*/
$.extend($.fn.treegrid.methods,{
/**
* 級聯選擇
* @param {Object} target
* @param {Object} param
* param包括兩個參數:
* id:勾選的節點ID
* deepCascade:是否深度級聯
* @return {TypeName}
*/
cascadeCheck : function(target,param){
var opts = $.data(target[0], "treegrid").options;
if(opts.singleSelect)
return;
var idField = opts.idField;//這裏的idField其實就是API裏方法的id參數
var status = false;//用來標記當前節點的狀態，true:勾選，false:未勾選
var selectNodes = $(target).treegrid('getSelections');//獲取當前選中項
for(var i=0;i<selectNodes.length;i++){
if(selectNodes[i][idField]==param.id)
status = true;
}
//自己勾選
if(status) {
onCheckDom(param.id);
} else {
unCheckDom(param.id);
}
//級聯選擇父節點
//selectParent(target[0],param.id,idField,status);
selectChildren(target[0],param.id,idField,param.deepCascade,status);
/**
* 級聯選擇父節點
* @param {Object} target
* @param {Object} id 節點ID
* @param {Object} status 節點狀態，true:勾選，false:未勾選
* @return {TypeName}
*/
function selectParent(target,id,idField,status){
var parent = $(target).treegrid('getParent',id);
if(parent){
var parentId = parent[idField];
if(status) {
$(target).treegrid('select',parentId);
onCheckDom(parentId);
} else {
$(target).treegrid('unselect',parentId);
unCheckDom(parentId);
}
selectParent(target,parentId,idField,status);
}
}
/**
* 級聯選擇子節點
* @param {Object} target
* @param {Object} id 節點ID
* @param {Object} deepCascade 是否深度級聯
* @param {Object} status 節點狀態，true:勾選，false:未勾選
* @return {TypeName}
*/
function selectChildren(target,id,idField,deepCascade,status){
//深度級聯時先展開節點
if(!status&&deepCascade)
$(target).treegrid('expand',id);
//根據ID獲取下層孩子節點
var children = $(target).treegrid('getChildren',id);
if(children){
for(var i=0;i<children.length;i++){
var childId = children[i][idField];
if(status) {
$(target).treegrid('select',childId);
onCheckDom(childId);
} else {
$(target).treegrid('unselect',childId);
unCheckDom(childId);
}
selectChildren(target,childId,idField,deepCascade,status);//遞歸選擇子節點
}
}
}
}
});
//treeGrid複選框js
$(".treeCheckBox").live('change',function(){
var _this = $(this);
var id = _this.attr("data-id");
//級聯選擇
$('#peopleList').treegrid('cascadeCheck',{
id:id, //節點ID
deepCascade:true //深度級聯
});
});
function onCheckDom(dataId){
$(".treeCheckBox[data-id='"+dataId+"']").each(function(){
$(this).attr("checked",true);
})
}
function unCheckDom(dataId){
$(".treeCheckBox[data-id='"+dataId+"']").each(function(){
$(this).attr("checked",false);
})
}
好了 ，代碼很簡單 沒有什麼難度，這個是同步加載的樹形，異步的話本身百度吧 ，這裏只是將分頁和checkbox勾選作了ui
相關文章
- 1. easyui 中的treegrid添加checkbox
- 2. easyui treegrid checkbox 聯動
- 3. easyUI添加自定義圖標
- 4. vue中elementui自定義表頭而且添加事件
- 5. easyui 分頁，排序自定義
- 6. 實現添加商品頁面，而且構建路由
- 7. CSS3實現自定義Checkbox和Radiobox
- 8. 純css實現CheckBox自定義樣式
- 9. jquery easyui datagrid 分頁實現
- 10. vue添加axios，而且指定baseurl
- 更多相關文章...
- • 自定義TypeHandler - MyBatis教程
- • MySQL自定義函數（CREATE FUNCTION） - MySQL教程
- • RxJava操作符（十）自定義操作符
- • ☆基於Java Instrument的Agent實現
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
