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"><divstyle="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><divstyle="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><divstyle="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请求数据给干掉了,并且手动管理分页的事件 也就是上一页 下一页神马的

在人生的道路上,谁都会遇到困难和挫折,

EazyUI TreeGrid分页、查询

相关文章:

你感兴趣的文章:

标签云: