easyUI dataGrid 列表分页使用

最新推荐文章于 2020-07-24 15:07:09 发布

左大头

最新推荐文章于 2020-07-24 15:07:09 发布

阅读量726

点赞数 1

分类专栏：前端文章标签： easyui datagrid 分页

本文链接：https://blog.csdn.net/qq_27556567/article/details/72884431

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

左大头

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
easyUI dataGrid 列表分页使用

--%> --%> wavent 角色编号: 角色名称: 查询 --> --> --> var datagrid; //定义全局变量 var editRow = "";//定义当前编辑的行
复制链接

扫一扫

专栏目录