技术基础文件
模板文件引入
jquery-1.8.3.min.js,jquery.alerts.js
jquery.json-2.4.js(字符处理,编码解码,兼容ie)
jquery-ui-1.9.2.custom.min.js,jquery-ui-1.9.2.custom.min.css
jquery.easyui.min.js,easyui.css,validator.js (输入框校验),icon.css(按钮样式)
基础工具
1. 消息提示
a> $.messager.defaults = {ok : "确定",cancel : "取消"};
对messager控件处理按钮字符
b> 提示框
$.messager.show({
title : title,
msg : msg,
showType : 'slide', //展示类型
timeout : time
});
2. 日期
3. 下拉框
$('#appKey').combobox({
url : ‘url',
valueField : id, //id
textField : value,//值
editable:false,
onLoadSuccess : function() { // 加载完成后,设置选中第一项
var val = $(this).combobox("getData");
// 随机显示
for (var item in val[0]) {
if (item == "appKey") {
$(this).combobox("select", val[0][item]);
}
}
}
});
分页
1. 前端页面
<div class="list">
<div class="listBar" style="text-align:left;">
<h1><span class="icon"> </span>页面标题</h1>
</div>
<!-- 查询条件 -->
<div id="tb" style="padding:5px;height:auto;margin-top:10px;">
<div>
<span class="soutile">条件一: </span>
<input class="easyui-textbox" value="" style="width:120px;height:15px" />
<span class="soutile">条件二: </span>
<input class="easyui-textbox" value="" style="width:120px;height:15px" >
<span class="soutile">条件三:</span>
<select class="easyui-combobox" panelHeight="auto" style="width:100px" >
</select>
<a href="" class="easyui-linkbutton" iconCls="icon-search">查询</a>
</div>
</div>
<!--分页表格采用easyUI datagrid -->
<div style="margin:auto;text-align:center;">
<table id="dg" style="height:500px"></table>
</div>
</div>
2. Js
到后台的页数属性名是page,数据量是rows
$('#dg').datagrid({
title : '批发商品池管理',
url : dataUrl, //数据源
rownumbers : true, //行数
pagination : true, //分页
fitColumns:false, //横向滚动条
nowrap : true,// 设置为true,当数据长度超出列宽时将会自动截取
striped : true,// 设置为true将交替显示行背景。
pageSize : 5,
loadMsg : "", //远程加载提示语,正在努力加载数据,请稍后...
pageNumber : 1,
pageList : [5, 10, 20, 50],
queryParams : {
//请求参数
},
columns : [[{
field : 'ck',
checkbox : true
}, {
field : 'optAccount',
title : '操作ID',
width : 75,
align : 'center'
}, {
field : 'auditType',
title : '操作形式',
width : 65,
align : 'center',
formatter : function(value, rec) {
//处理数据
}
}
]],
singleSelect : false,
selectOnCheck : true,
checkOnSelect : true,
toolbar : [{
text : '返回',
iconCls : 'icon-back',
handler : function() {
//方法
}
}, '-', {
text : '通过',
iconCls : 'icon-redo',
handler : function() {
//方法
}
}],
onLoadSuccess : function(data) {
}
}).datagrid('getPager').pagination({
pageSize : 5,// 每页显示的记录条数,默认为10
// pageList: [5,10,20,15],//可以设置每页记录条数的列表
beforePageText : '第',// 页数文本框前显示的汉字
afterPageText : '页 共 {pages} 页',
displayMsg : '当前显示 {from} - {to} 条记录 共 {total} 条记录'
,onChangePageSize:function(){ //改变pagesize触发事件
var pager = $('#dg').datagrid('getPager');
pager.pagination('refresh', {
pageNumber : 1
});
}
});
3. Java
Gcms标准分页查询
// 页数
String page = request.getParameter("page");
// 数据量
String rows = request.getParameter("rows");
if (!StringUtils.isBlank(page)) {
// 展示数据量
pager.setPageSize(Integer.parseInt(rows));
// 页数
pager.setPageNumber(Integer.parseInt(page));
}
// bo查询条件
QueryResult<GcWholeSaleProductAuditBo> querylist = Service.query (pager,
bo);
关于Jquery-easyUi的常用用法
最新推荐文章于 2021-02-21 10:49:24 发布