EazyUI TreeGrid分页、查询

话说刚从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));
	}

完了

版权声明：本文为博主原创文章，未经博主允许不得转载。

时间： 2024-08-30 05:48:57

EazyUI TreeGrid分页、查询的相关文章

TreeGrid分页树形表格

先展示效果图: 加载treegrid的json数据格式有两种: (1)基本的数据结构 [{ "id":1, "name":"C", "size":"", "date":"02/19/2010", "children":[{ "id":2, "name":"Program Files", &

Oracle分页查询

一.利用rownum,无order by(最优方案) 如下例查询出来5003行数据,然后扔掉了前面5000行,返回后面的300行.经过测试,此方法成本最低,只嵌套一层,速度最快!即使查询的数据量再大,也几乎不受影响,速度依然. SELECT * FROM (SELECT ROWNUM AS rowno, t.* FROM XXX t WHERE hire_date BETWEEN TO_DATE ('20060501', 'yyyymmdd') AND TO_DATE ('20060731',

QBC查询、离线条件查询（DetachedCriteric）和分页查询模版

一.QBC检索步骤 QBC检索步骤: 1.调用Session的createCriteria()方法创建一个Criteria对象. 2.设定查询条件.Expression类提供了一系列用于设定查询条件的静态方法, 这些静态方法都返回Criterion实例,每个Criterion实例代表一个查询条件. Criteria的add()方法用于加入查询条件. 3.调用Criteria的list()方法执行查询语句.该方法返回List类型的查询结果,在 List集合中存放了符合查询条件的持久化对象. 比较运

Linq高级查询与分页查询

Linq高级查询 以~开头: r=>r.Name.StartsWith("李"); 以~结尾: r=>r.Name.EndsWith("光"); 包含(模糊查询): r=>r.Name.Contains("四"); 数据总个数: Con.Goods.Count();||Con.Users.ToList().count; 最大值: Con.Goods.ToList().Max(r=>r.Price); 最小值: Con.Go

bos 第4 (区域excel批量导入、区域通用分页查询、分区的添加、分区多条件分页查询、分区导出excel)

BOS项目笔记 第4天 今天内容安排: 1.区域批量导入功能 jQuery OCUpload(一键上传插件).apache POI.pinyin4j 2.实现区域的分页查询 3.对分页代码重构 4.添加分区(combobox下拉框) 5.分区的组合条件分页查询 6.分区数据导出功能 1. 区域数据批量导入功能 1.1 一键上传插件使用 ajax不能做文件上传. 第一步:在jsp页面中引入插件的js文件 <script type="text/javascript" src=&quo

mybatis中分页查询

1 如果在查询方法中有多个参数,可以使用map对象将所有数据都存储进去.比如分页查询,需要用到两个参数,可以将这两个参数包装到map中. 例子:分页查询 dao层方法 public List<Student> getStudentPage(int pstart, int pnumber) throws Exception{ SqlSession sqlSession = MybatisUtil.getSqlSession(); Map<String,Integer> map = n

HBase多条件及分页查询的一些方法

HBase是Apache Hadoop生态系统中的重要一员,它的海量数据存储能力,超高的数据读写性能,以及优秀的可扩展性使之成为最受欢迎的NoSQL数据库之一.它超强的插入和读取性能与它的数据组织方式有着密切的关系,在逻辑上,HBase的表数据按RowKey进行字典排序, RowKey实际上是数据表的一级索引(Primary Index),由于HBase本身没有二级索引(Secondary Index)机制,基于索引检索数据只能单纯地依靠RowKey.也只有使用RowKey查询数据才能得到非常高

.net淘宝客基础api 分页查询

1 using System; 2 using System.Collections.Generic; 3 using System.Configuration; 4 using System.Linq; 5 using System.Web; 6 using Top.Api; 7 using Top.Api.Request; 8 using Top.Api.Response; 9 10 namespace MvcWebApp.DataBase 11 { 12 public class TaoD

php分页查询

分页查询通过引用page.class.php分页工具,就好写多了: 1.首先要有显示的内容: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">