easyUI dataGrid 列表分页使用

xiaoxiao2021-02-27  147

<%@ 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>
转载请注明原文地址: https://www.6miu.com/read-14213.html

最新回复(0)