easy-ui treegrid 实现分页 并且添加自定义checkbox
2024-03-20 07:24:38
首先第一点easy-ui treegrid 对分页没有好的实现，
因为在分页的过程中是按照 根节点来分页的 后台只能先按照 根节点做分页查询 再将子节点关联进去，
这样才能将treegrid 按照根节点来进行分页. 或许也能按照子节点来进行分页处理，但是这样会将树形结构破坏掉 ，自己没有实现过子节点分页的情况。
这里重点讲一下 根节点分页，并实现checkbox 级联勾选。
1、先给大家看下效果图
第一张图是实现的treegrid,第二张图是checkbox 的 treegrid
可以看到 第二张图的级联勾选 ， 你还可已自定义自己的勾选方法，具体问题具体实现。
2、接下来是代码实现
$(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勾选做了
最新文章
- EasyUI TreeGrid DataTable转换数据实现案例
- MySQL 第二篇
- the useful for loop
- Git工作流指南：Pull Request工作流
- FileUpload控件「批次上传 / 多档案同时上传」的范例--以「流水号」产生「变量名称」
- ibatis的iterate使用
- 【设计模式 - 18】之备忘录模式（Memento）
- #include <list>
- Asp.Net下，基于Jquery的Ajax二级联动
- 如何制作gif图片
- Python中模块之queue的功能介绍
- asp.net 调试与iis部署的问题
- UI组件--element-ui合计行在横向滚动条下面的解决方法
- Flask--四种请求钩子函数
- vb的VSFlexGrid控件
- c3 新特性
- idea中复制module和module中的蓝色tag出现的方法
- Unity的界面排版: RectTransform
- js获取checkbox值的方法
- 一些baidu面经