您的位置：首页 > 产品设计 > UI/UE

EazyUI TreeGrid分页、查询

2015-07-01 11:06 609 查看

话说刚从ligerui转过来的时候发现eazyui的treegrid好恶心的说，在ligerui中市容treegrid只需要设置id-pid-treefIle三个字段就会自动帮你出现树表格的，而在eazyui中 id-pid中只能设置fileID 不能设置Pid 只能用默认的_parentid 最恶心的地方是只支持int类型的的id-pid模式，而我这边的id-pid是guid的字符串类型，最后做了一个int的例子，又发现分页很恶心每页必须有个根节点，比如10条每页一个跟有11个子，在第二页就没法看到地10
和11个子了，没办法最后就只能拼 chider模式了。

先上效果图

首先把整个布局丢上来也就是html代码

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<%--公用页面 --%>
<%@ include file="../Common/headnormal.jsp"%>
<script type="text/javascript" src="../../Script/Menu/menu.js"></script>
<script type="text/javascript" src="../../Script/Menu/tool.js"></script>
<style type="text/css">
.labelAlignRight {
text-align: right;
}

.labelAlignCentert {
text-align: center;
}
</style>
</head>

<body>
<div id="addMenu" style="width:150px;">
<div id="addRoot">添加根菜单</div>
<div id="addSub">添加子菜单</div>
</div>
<table id="searchTool" style="width:100% ;height:100%;">
<tr style="height:1%;">
<td colspan="8">
<div
style="background-color: rgb(224, 236, 255); width: 99.8%; border: 1px solid #95b8e7;">
<table>
<tr>
<td><a id="btnAdd" href="javascript:void(0);" class="easyui-menubutton"
plain="true" iconcls="icon-add" data-options="menu:'#addMenu'">添加</a></td>
<td>
<div
style="height: 20px; border-left: solid 1px #ccc; border-right: solid 1px #fff;"></div>
</td>
<td><a id="btnEdit" href="javascript:void(0);" class="easyui-linkbutton"
plain="true" iconcls="icon-edit">编辑</a></td>
<td>
<div
style="height: 20px; border-left: solid 1px #ccc; border-right: solid 1px #fff;"></div>
</td>
<td><a id="btnDelete" href="javascript:void(0);" class="easyui-linkbutton"
plain="true" iconcls="icon-remove">删除</a></td>
</tr>
</table>
</div>
</td>
</tr>
<tr style="height:1%;">
<td>
<div id="searchui" class="easyui-panel"
data-options="iconCls:'icon-search' " title="搜索条件"
style="height:70px;">
<table style="height:100%;width:100%;">
<tr>
<td class="labelAlignRight">标题：</td>
<td><input id="txtTitle" class="easyui-textbox"
style="width:150px;" /></td>
<td class="labelAlignRight">路径：</td>
<td><input id="txtRequestUrl" class="easyui-textbox"
style="width:150px;" /></td>
<td class="labelAlignRight">状态：</td>
<td><select id="txtState" class="easyui-combobox" style="width:150px;">
<option value="-1" >请选择</option>
<option value="0" >正常</option>
<option value="1" >禁用</option>
</select></td>
<td class="labelAlignRight">人员：</td>
<td><input id="txtCreateUser" class="easyui-textbox"
style="width:150px;" /></td>
<td><a id="btnSearch" href="javascript:void(0);"
class="easyui-linkbutton" data-options="iconCls:'icon-search'"
style="width:73px">查找</a> <a id="btnClear"
href="javascript:void(0);" class="easyui-linkbutton"
data-options="iconCls:'icon-undo'" style="width:73px">重置</a></td>
</tr>
</table>
</div>
</td>
</tr>
<tr style="height:*;">
<td>
<div style="width:100% ;height:100%;">
<div id="dg"></div>
</div>
</td>
</tr>
</table>
<div id="win"></div>
</body>
</html>

其实主要的就是这个div

<div id="dg"></div>

因为需要手动拼接json数据，所以下面这个初始化就吧href请求数据给干掉了，并且手动管理分页的事件也就是上一页下一页神马的

下面是全部js代码

$(function() {
//加载日志列表
$('#dg').treegrid({
idField: 'ID',
treeField: 'Title',
pageNumber:1,
title:'菜单列表',
pageList:[10,20,30,40,50],
striped: true,
iconCls:'icon-list' ,
pagination:true,
rownumbers: true,
singleSelect:true,
method: 'POST',
fitColumns:true,
fit:true,
//url: '/Menu/getMenu',
loadMsg:'数据加载中请稍后……',
columns : [ [
{field : 'IconUrl',title : '图标',width : 40,align : 'center'},
{field : 'Title',title : '标题',width : 200,align : 'left'},
{field : 'Url',title : '路径',width : 240,align : 'left'},
{field : 'State',title : '状态',width : 40,align : 'center',formatter: function(value,row,index){
if(row.State==0)
{
return "正常";
}
if(row.State==1)
{
return "禁用";
}
return row.State;
}},
{field : 'Order',title : '显示顺序',width : 40,align : 'center'},
{field : 'CreateName',title : '创建人员',width : 80,align : 'center'},
{field : 'CreateTime',title : '创建时间',width : 80,align : 'center'}
] ]
});
$("#dg").treegrid('getPager').pagination({
onSelectPage:function(pageNum, pageSize){
loadTree(pageNum,pageSize);
//分页控件上的所有对分页相关的事件，只要这个就好了		}
});
loadTree(-1,-1);
//查找
$('#btnSearch').bind('click', function(){
loadTree(-1,-1);
});
//清空查找框
$('#btnClear').bind('click', function(){
$("#txtTitle").textbox("setValue","");
$("#txtRequestUrl").textbox("setValue","");
$("#txtState").combobox("setValue","-1");
$("#txtCreateUser").textbox("setValue","");
});
});

function loadTree(page,rows)
{
var param={};
param.flag=new Date();
if(page==-1&&rows==-1){
var options=$("#dg").treegrid("options");
param.page=options.pageNumber;
param.rows=options.pageSize;
}else
{
param.page=page;
param.rows=rows;
}
param.title=$.trim($("#txtTitle").textbox('getValue'));
param.url= $.trim($("#txtRequestUrl").textbox('getValue'));
param.state= $("#txtState").combobox('getValue')=="-1"?"":$("#txtState").combobox('getValue');
param.uname= $.trim($("#txtCreateUser").textbox('getValue'));
$("#dg").treegrid("loading");
//显示出正在加载这样的等待提示	$("#dg").treegrid('getPager').pagination("loading");
$.post("/Menu/getMenu",param,function(data){
var rows=arrayToTree(data.rows,"ID","PID");
data.rows=rows;
$("#dg").treegrid("loadData",data);
$("#dg").treegrid('getPager').pagination("loaded");
$("#dg").treegrid("loaded");
});

}

最后把 json=[] 数组转成id-pid 的childer模式方法

//将ID、ParentID这种数据格式转换为树格式
function arrayToTree(data, id, pid)
{
if (!data || !data.length) return [];
var targetData = [];                    //存储数据的容器(返回)
var records = {};
var itemLength = data.length;           //数据集合的个数
for (var i = 0; i < itemLength; i++) {
var o = data[i];
records[o[id]] = o;
}
for (var i = 0; i < itemLength; i++) {
var currentData = data[i];
var parentData = records[currentData[pid]];
if (!parentData) {
targetData.push(currentData);
continue;
}
parentData.children = parentData.children || [];
parentData.children.push(currentData);
}
return targetData;
}

然后是后台返回的数据

public void getMenu()
{
int page = getParaToInt("page");
int rows = getParaToInt("rows");
String title=getPara("title");
String uname=getPara("uname");
String url=getPara("url");
String state=getPara("state");

StringBuffer sql=new StringBuffer();
List<Object> paramObj=new ArrayList<Object>();

if(!title.equals(""))
{
sql.append(" and a.Title like ?");
paramObj.add("%"+title+"%");
}
if(!url.equals(""))
{
sql.append(" and a.Url like ?");
paramObj.add("%"+url+"%");
}
if(!state.equals(""))
{
sql.append(" and a.State = ?");
paramObj.add(state);
}
if(!uname.equals(""))
{
sql.append(" and b.`Name` like ?");
paramObj.add("%"+uname+"%");
}

sql.append(" ORDER BY `Order` ASC");
IMenu menuBusiness = BusinessFactory.CreateMenuBusiness();
Page<Menu> logInfo = menuBusiness.GetPageList(page, rows,
sql.toString(), paramObj);
Map<String, Object> map =new HashMap<String, Object>();
map.put("total",logInfo.getTotalRow());
map.put("rows",logInfo.getList());
renderJson(JsonKit.toJson(map));
}

完了

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航