Jquery EasyUI DataGridView(easyui分页列表)

来源：互联网发布：nginx 变量编辑：程序博客网时间：2024/04/28 10:16

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
</head>
<textarea style="width:1200px;height:700px; font-size:15px;background-color:#fff4c1;">
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/lib/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/lib/jquery-easyui-1.4.5/jquery.easyui.min.js"></script>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/js/lib/jquery-easyui-1.4.5/themes/default/easyui.css"></link>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/js/lib/jquery-easyui-1.4.5/themes/icon.css"></link>
<script>
$(function(){
$('#tt').datagrid({
title:'EasyUI 测试',//表头的标题
iconCls:'icon-edit',//表头的图标样式
url:'${pageContext.request.contextPath}/external/queryJson',
//注1：后台传递表格数据必须是JSON格式，且必须包含rows(当前页显示的数据集)和total(总共多少数据)两个属性，如果需要分页，还要传递page(当前是哪一页)属性
//注2：后台接收表格传递的分页参数直接用Integer.parseInt(request.getParameter("page"))获取当前页码、Integer.parseInt(request.getParameter("rows"))获取每页显示行数
method: 'POST',
height:$(document).width,//设置高度为当前页面高度
fitColumns:true,//是否自动填充每列宽度（必须为每列设置width属性值才会生效）
singleSelect:true,//是否为单行选中
pagination:true,//是否显示分页插件
rownumbers:true,//每列前的编号
loadMsg: "请稍等，数据加载中...",
columns:[[
{field:'ck',title: '<input id="detailcheckbox" type="checkbox">', width: 30,
formatter: function (value, rec, rowIndex) {//formatter格式化数据表格
return '<input type="checkbox" name="PD" >';
},width:30,editor:'text'},
//{field:'ck',checkbox:true},
{field:'id',title:'数据编号',width:30,editor:'text',hidden:true},
{field:'firmsName',title:'厂家名称',width:30,editor:'text'},
{field:'systemName',title:'接入系统名称',width:30,editor:'text'},
{field:'responsiblePerson',title:'负责人姓名',width:30,editor:'text'},
{field:'responsibleTelephone',title:'负责人电话',width:30,editor:'text'},
{field:'systemUrl',title:'接入系统url',width:30,editor:'text'},
{field:'beginTime',title:'接入开始时间',width:30,editor:'text'},
{field:'endTime',title:'接入结束时间',width:30,editor:'text'},
{field:'interfaceMan',title:'接口人',width:30,editor:'text'},
{field:'interManTel',title:'接口人电话',width:30,editor:'text'},
{field:'authorizationCode',title:'授权码',width:30,editor:'text'},
{field:'state',title:'状态',width:30,editor:'text'},
{field:'action',title:'操作',width:30,align:'center',formatter:function(value,row,index){
var e = '<a href="#" onclick="editrow('+index+')">编辑</a>   ';
var d = '<a href="#" onclick="deleterow('+index+')">审批</a>';
return e+d;
}}
]],
toolbar:[
{text:'增加',iconCls:'icon-add',handler:addData},
{text:'修改',iconCls:'icon-save',handler:updateData},
{text:'删除',iconCls:'icon-cancel',handler:deleteData}
],
onLoadSuccess: function (data) {
$("#detailcheckbox").unbind();//为特定事件绑定函数
//绑定全选功能
$("#detailcheckbox").click(function () {
if ($(this).attr('checked') == true) {
$("input[name='PD']").attr("checked", 'checked');
} else {
$("input[name='PD']").removeAttr("checked");
}
});
}

});

//设置分页插件属性
var p = $('#tt').datagrid('getPager');
$(p).pagination({
pageSize: 10,//每页显示的记录条数，默认为5
pageList: [10,15],//可以设置每页记录条数的列表
beforePageText: '第',//页数文本框前显示的汉字
afterPageText: '页共 {pages} 页',
displayMsg: '当前显示 {from} - {to} 条记录共 {total} 条记录'
});
});

//DataGrid只提供了最后一个复选框被勾选时的获取行数据方法（后被勾选的替换了前者），这里要使用extend把这个方法扩充一下，使其可以获取多个复选框同时被勾选时的行数据
$.extend($.fn.datagrid.methods, {
getChecked: function (jq) {
var rr = [];
var rows = jq.datagrid('getRows');
//给DataGrid框架的每个复选框一个行引索，使其再次使用getChecked获取被勾选数据时可以获取多个复选框对象
jq.datagrid('getPanel').find('div.datagrid-cell input:checked').each(function () {
var index = $(this).parents('tr:first').attr('datagrid-row-index');
rr.push(rows[index]);
});
return rr;
}
});

//新增数据
function addData(){
//$('#tt').datagrid('reload'); //刷新当前页
alert("你点击的是'增加'按钮。");
}
//修改数据
function updateData(){
var names = getCheckData();
if(names==null || names==""){
alert("你没有选中要修改的数据。");
}else{
if(names.toString().split(",").length>1){
alert("最多只能选择一条数据进行修改。");
}else{
alert("你要修改的数据名称为："+names[0]);
}
}
}
//删除数据
function deleteData(){
//var rows = $('#tt').datagrid('getSelections');//获得所有被选中的行（此选中是鼠标点击的行，不是勾选复选框）
var names = getCheckData();
if(names==null || names==""){
alert("你没有选中要删除的数据。");
}else{
if(names.toString().split(",").length==1){
if(confirm("确定要删除'"+names[0]+"'这条数据吗？")){
alert("删除成功");
}
}else{
if(confirm("你选择了多条数据，确定要删除它们吗？")){
alert("删除成功");
}
}
}
}

//获取所有勾选行数据
function getCheckData(){
var checkedItems = $('#tt').datagrid('getChecked');
var names = [];
console.log(checkedItems);
$.each(checkedItems, function(index, item){
if(item=="" || item==null || item=="undefined"){

}else{
names.push(item.name);
}
});
return names;
}

</script>
</head>
<body>
<h4>EasyUI DataGrid Test</h4>
<table id="tt"></table>
</body>
</html>
</textarea>
<html>

1 0