<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/common/taglib.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<!-- 导入该页面需要的模板jsp -->
<!-- 基础的 -->
<%-- <%@ include file="/WEB-INF/jsp/common/main.jsp"%> --%>
<!-- bootstrap表格 -->
<%-- <%@ include file="/WEB-INF/jsp/common/bootstrap-table.jsp"%> --%>
<link rel="stylesheet" type="text/css" href="${path}/static/plugins/jquery-easyui-1.5.2/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${path}/static/plugins/jquery-easyui-1.5.2/themes/icon.css">
<link rel="stylesheet" type="text/css" href="${path}/static/plugins/jquery-easyui-1.5.2/demo/demo.css">
<script type="text/javascript" src="${path}/static/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript" src="${path}/static/plugins/jquery-easyui-1.5.2/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${path}/static/plugins/jquery-easyui-1.5.2/locale/easyui-lang-zh_CN.js"></script>
<title>wavent</title>
</head>
<body>
<!--条件查询 -->
<!-- <div data-options="region:'north',split:false,border:false,title:'查询条件',collapsed:false,iconCls:'icon-search'" style="height:60px;margin:5px 5px 0 5px">
角色编号:<input type="text" name="cdRl" id="cdRl" class="easyui-validatebox" maxlength="10" style="height:15px;margin:0 5px 0 5px" />
角色名称:<input type="text" name="stNm" id="stNm" class="easyui-validatebox" maxlength="10" style="height:15px;margin:0 5px 0 5px" />
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-search'" οnclick="Search()">查询</a>
</div> -->
<!--数据展示 -->
<!-- <div data-options="region:'center',fit:true,split:false,border:false" class="easyui-layout"> -->
<table id="dataGrid" style="width:100%" class="easyui-layout">
</table>
<!-- </div> -->
<script type="text/javascript">
var datagrid; //定义全局变量
var editRow = "";//定义当前编辑的行
datagrid = $("#dataGrid").datagrid({
/* title: "角色管理", */
border: false,
fit:true,
locale: "zh_CN",
iconCls: 'icon-save',
striped: true,
sortable:true,//启动排序
sortName:'cdRl',//排序默认字段
sortOrder:'asc',//排序方式
collapsible: false,
checkOnSelect: false, selectOnCheck: false,
url: "${path}/role/getSelectPage2",
queryParams: { cdRl:"", stNm: ""},
columns: [[
{ field:'ck',checkbox:true},
{field:'edit',title:'操作',width:'10%',align:'center',
formatter:function(value, rowData, rowIndex){
var btn = '<a class="editcls" οnclick="editsRow(\''+rowData.stNm+'\')" href="javascript:void(0)" title="修改"></a>';
btn += '<a class="delecls" οnclick="deleRow(\''+rowData.stNm+'\')" href="javascript:void(0)" title="删除"></a>'
return btn;
}
},
{ field: 'cdRl', title: '编号', width: '10%', align: 'center',sortable:true},
{ field: 'stNm', title: '角色名称', width: '30%', align: 'center',sortable:true},
{ field: 'stDes', title: '角色描述', width: '48%', align: 'center' }
]],
toolbar: [{
id: 'btnAdd',
text: "添加",
iconCls: 'icon-add',
handler: function () {
$("#winAdd").window("open");
}
},{
id: 'btnEdit',
text: "修改",
iconCls: 'icon-edit',
handler: function () {
alert("这里是修改");
}
},{
id: 'btnSele',
text: "查看复选框",
iconCls: 'icon-edit',
handler: function () {
var checkedItems = $('#dataGrid').datagrid('getChecked');
var names = [];
$.each(checkedItems, function(index, item){
names.push(item.cdRl);
});
console.log(names.join(","));
}
},{
text: "角色编号:<input type='text' id='cdRl'/>"
},{
text: "角色名称:<input type='text' id='stNm'/>"
}, {
id: 'btnEdit',
text: "查询",
iconCls: 'icon-search',
handler: function () {
Search();
}
}],
onLoadSuccess:function(data){
$('.editcls').linkbutton({plain:true,iconCls:'icon-edit'});
$('.delecls').linkbutton({plain:true,iconCls:'icon-cancel'});
if(data){
$.each(data.rows, function(index, item){
if(item.checked){
$('#dataGrid').datagrid('checkRow', index);
}
});
}
},
pagination: true,//表示在datagrid设置分页
rownumbers: false,
singleSelect: true,
});
$('#dataGrid').datagrid('getPager').pagination({
pageSize: 10,
pageNumber: 1,
pageList: [10, 20, 30, 40, 50],
beforePageText: '第',//页数文本框前显示的汉字
afterPageText: '页 共 {pages} 页',
displayMsg: '当前显示 {from} - {to} 条记录 共 {total} 条记录',
});
function editsRow(projectname){
console.info(projectname);
}
function editUser(ss){
console.info(ss);
}
function deleRow(obj){
console.info("删除")
}
//条件查询
function Search() {
var queryParameter = $('#dataGrid').datagrid("options").queryParams;
queryParameter.cdRl = $("#cdRl").val();
queryParameter.stNm = $("#stNm").val();
$("#dataGrid").datagrid("reload");
}
</script>
</body>
</html>
easyUI dataGrid 列表分页使用
最新推荐文章于 2020-07-24 15:07:09 发布