JAVa JFinal + EazyUI =Grid例子_jfinal grid方法-CSDN博客

本文链接：https://blog.csdn.net/qq873113580/article/details/46551303

PS顺便提下:Jfinal中，你使用SQL获取出来的列是神马，通过JSONKit转换返回来的List的json对象就包含了 select from 之间的字段

特别提醒：grid里面的toolbar的方法只加载第一次时候的代码类似缓存

2015-7-1 更新个新布局，全屏填充的

<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>

新布局效果图

前台

<body>
	<table style="width:100% ;height:100%;">
		<tr style="height:10%;">
			<td>
				<div id="searchui" class="easyui-panel" title="搜索条件"
					style="height:80px;"></div>
			</td>
		</tr>
		<tr  style="height:*;">
			<td>
				<div style="width:100% ;height:100%;">
					<div id="dg"></div>
				</div>
			</td>
		</tr>
	</table>
</body>

$(function(){
 $('#dg').datagrid({  
  pageNumber:1,  
  title:'列表展示',  
  striped: true,    
  iconCls:'icon-standard-application-view-columns' ,  
  pagination:true,  
  rownumbers: true,    
  singleSelect:true,  
  method: 'POST',  
  fit:true,  
  url: '/CodeFactory/getUIList',  
  loadMsg:'数据加载中请稍后……', 
  onBeforeLoad: function (param) {  
   if(param.sort==undefined)
   {
    param.sort="tablename";
    param.order="desc";
   }
  },
   columns : [ [   
                 {field : 'tablename',title : '表名',width : 160,align : 'left',sortable:true},   
                 {field : 'tabledescription',title : '说明',width : 240,align : 'left',sortable:true},   
                 {field : 'classname',title : '类名',width : 160,align : 'left',sortable:true}, 
                 {field : 'parenttable',title : '父表',width : 160,align : 'left',sortable:true}
                 ]]
 });
}); //查找
  $('#btnSearch').bind('click', function(){
   $('#dg').datagrid('reload');    
  });
  //清空查找框
  $('#btnClear').bind('click', function(){
      $("#txtTitle").textbox("setValue","");
   $('#txtType').combobox('setValue','请选择');
   $("#txtRequestUrl").textbox("setValue","");
   $("#txtOperationUser").textbox("setValue","");
   $("#txtDateStart").datebox('setValue','');
   $("#txtDateEnd").datebox('setValue','');
  });
  
});

 上面部分做一个Grid分页无问题 也不需要加，下面这个是手动修改分页的东西，做的备注

$("#dg").treegrid('getPager').pagination({
  onSelectPage:function(pageNum, pageSize){
   loadTree(pageNum,pageSize);
  }
 }); //设置分页控件  
 var p = $('#dg').datagrid('getPager');  
 $(p).pagination({  
     pageSize: 10,//每页显示的记录条数，默认为10  
     beforePageText: '第',//页数文本框前显示的汉字  
     afterPageText: '页    共 {pages} 页',  
     displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录',  
     /*onBeforeRefresh:function(){ 
         $(this).pagination('loading'); 
         alert('before refresh'); 
         $(this).pagination('loaded'); 
     }*/ 
 });  
});

action

int page = getParaToInt("page");
  int rows = getParaToInt("rows");
  //String sort = getPara("sort");
  //String order = getPara("order");
  FactoryCodeBusiness factoryCodeBusiness = new FactoryCodeBusiness();
  Page<FactoryCode>  pageList = factoryCodeBusiness.GetPageList(page, rows, "", new ArrayList<Object>());
  Map<String, Object> map = new HashMap<String, Object>();
  map.put("total", pageList.getTotalRow());
  map.put("rows", pageList.getList());
  renderJson(JsonKit.toJson(map));

对应的方法获取

public Page<LogInfo> GetPageList(int page, int rows, String sql,
   List<Object> param) {
  param.add(0, 1);
  Page<LogInfo> list = LogInfo.me.paginate(page, rows, "select  * ,(select `Name` from `user` where `user`.ID=LogInfo.OperationID) as OperationName ",
    " from LogInfo where 1=?  " + sql, param.toArray());
  return list;
 }