[easyUI] datagrid 数据格 可以进行分页

1. 新建一个GridNode的类:

public class GridNode {
    private Long id;
    private String title;//投票标题
    private Integer type;
    private String version;
    private String options;//备选项数
    private String participants;//参与人数
        //getter/setter/constructor省略
}

2. 网页内新建一个table元素.

3. script代码

    $(function(){
        $(‘#dg‘).datagrid({
            url:‘server/demo7_server.jsp‘,     //远程请求数据的url路径
            pagination:true,             //显示底部分页栏
            pageSize:5,                    //默认每页记录数
            pageList:[5,10,15],             //显示列表记录数的下拉框选项(左下角的数字下拉框)
            columns:[[    //是一个JSON数组,列:复选框,标题,备选项数,参与人数
                {field:‘ck‘,checkbox:true},
                {field:‘title‘,title:‘投票标题‘,width:408},
                {field:‘options‘,title:‘备选项数‘,width:60,align:‘center‘},
                {field:‘participants‘,title:‘参与人数‘,styler:myStyler}
            ]],
            toolbar: [{  //是一个JSON数组
            text: ‘添加‘,
            iconCls: ‘icon-add‘,
            handler: function() {  该JSON对表示一个函数:弹出添加操作.当然可以丰富其内容真正实现添加,比如跳转到添加函数的控制器.
                 alert("添加");
            }
        }, ‘-‘, {  //‘-‘ 功能未知
            text: ‘修改‘,
            iconCls: ‘icon-edit‘,
            handler: function() {
                alert("修改");
            }
        }, ‘-‘,{
            text: ‘删除‘,
            iconCls: ‘icon-remove‘,
            handler: function(){
                 alert("删除");
            }
        }],
            singleSelect:true,  //单选,这个表格不能多选.
            rownumbers:true,  //显示行数
            iconCls: ‘icon-search‘, //图标
            fitColumns:true,//自适应宽度,防止水平滚动
            height:‘auto‘,
            striped:true,//隔行变色
            loadMsg:"正努力为您加载中......" //刚加载或者刷新后加载过程中显示的信息
        });
    });
    //下面的函数不知道有什么卵用...
    function myStyler(value,row,index){
        if (value < 5){
            return ‘background-color:#ffee00;color:red;‘;
        }else if(value > 15){
            return ‘color:green;‘;
        }
    }
    $(function(){
        $(‘#dg‘).datagrid({
            url:‘server/demo7_server.jsp‘,     //远程请求数据的url路径
            pagination:true,             //显示底部分页栏
            pageSize:5,                    //默认每页记录数
            pageList:[5,10,15],             //显示列表记录数的下拉框选项
            columns:[[
                {field:‘ck‘,checkbox:true},
                {field:‘title‘,title:‘投票标题‘,width:408},
                {field:‘options‘,title:‘备选项数‘,width:60,align:‘center‘},
                {field:‘participants‘,title:‘参与人数‘,styler:myStyler}
            ]],
            toolbar: [{
            text: ‘添加‘,
            iconCls: ‘icon-add‘,
            handler: function() {
                 alert("添加");
            }
        }, ‘-‘, {
            text: ‘修改‘,
            iconCls: ‘icon-edit‘,
            handler: function() {
                alert("修改");
            }
        }, ‘-‘,{
            text: ‘删除‘,
            iconCls: ‘icon-remove‘,
            handler: function(){
                 alert("删除");
            }
        }],
            singleSelect:true,
            rownumbers:true,
            iconCls: ‘icon-search‘,
            fitColumns:true,//自适应宽度,防止水平滚动
            height:‘auto‘,
            striped:true,//隔行变色
            loadMsg:"正努力为您加载中......"
        });
    });

    function myStyler(value,row,index){
        if (value < 5){
            return ‘background-color:#ffee00;color:red;‘;
        }else if(value > 15){
            return ‘color:green;‘;
        }
    }

4. 服务器网页的Java代码

a>导入GridNode的javaBean

b>新建ArrayList<GridNode>:

List<GridNode> list = new ArrayList<GridNode>();

并新建一些GridNode对象添加到list中.

list.add(new GridNode(1L,"选出你心目中最好的下载工具","2","6"));

c>接下来的代码:

 1 //获取客户端传递的分页参数    默认参数rows表示每页显示记录条数,  默认参数page表示当前页数
 2 Integer pageSize = Integer.parseInt(request.getParameter("rows"));//目测rows是datagrid自带的参数,表示行数
 3 Integer pageNumber = Integer.parseInt(request.getParameter("page"));//当前页码
 4 StringBuilder builder = new StringBuilder("{\"total\":"+list.size()+",\"rows\":[");
 5 int start = (pageNumber-1) * pageSize;//计算开始记录数
 6 int end = start+pageSize;//计算结束记录数
 7 for(int i=start;i<end && i<list.size();i++){
 8     GridNode gn = list.get(i);
 9     builder.append("{\"id\":\""+gn.getId()+"\",\"title\":\""+gn.getTitle()+"\",\"options\":"+gn.getOptions()+",\"participants\":"+gn.getParticipants()+"},");
10 }
11 String gridJSON = builder.toString();
12 if(gridJSON.endsWith(",")){
13     gridJSON = gridJSON.substring(0,gridJSON.lastIndexOf(","));
14 }
15 out.print(gridJSON+"]}");
//输出:

{"total":list.size(),"rows":[{"id":1L,"title":"选出1",....}
,{"id":2L,"title":"选出2",....},...]

原文地址:https://www.cnblogs.com/zienzir/p/9221333.html

时间: 2024-11-06 19:31:15

[easyUI] datagrid 数据格 可以进行分页的相关文章

jQuery Easyui datagrid 数据表格的使用

jQuery Easyui datagrid 数据表格的使用1. 在页面显示表格的位置 提供<table>标签,指定 id 元素2. 在 JS 代码 $("#grid").datagrid({-}); 完成对表格设置表格列定义远程数据加载分页 顶部工具栏 代码效果 原文地址:https://blog.51cto.com/13587708/2420696

JQuery EasyUI 学习——Struts2与EasyUI DataGrid数据表格结合使用显示数据库数据

因为EasyUI DataGrid只要取出后台传过来的一定格式的JSON数据,就可以在前台页面数据表格中,以一定形式显示数据库中的数据.此处,我们使用Struts2框架整合DataGrid,实现数据的显示. 一.页面内容 为了在页面中显示数据库中字段内容,需要定义一个table,通过EasyUI内部设计,自动显示数据,如下: <%@ page language="java" import="java.util.*" pageEncoding="UTF

JQuery easyui datagrid 单元格编辑时,使用浮动的textarea文本框并进行数据校验

有两种方式实现,一种方式是在html中验证,一种方式是在js中进行验证 方式一: <th data-options="filed:'remark',width:200,editor:{type:'textarea'}">备注</th> 方式二: <th data-options="filed:'remark',width:200,editor:{type:'textarea', options:{validType:'maxLength[150]

easyui datagrid 单元格编辑 即见即所得,MVC菜单维护,扫描增加

效果如图: 参见 EasyUI 官方 Demo 及文档 @{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml"; } <script src="~/jquery-easyui-1.4.2/locale/easyui-lang-zh_CN.js"></script> <table id="datagrid" class

jquery easyui DataGrid 数据表格 属性

中文帮助请点这里:中文属性详解 以下为未完结版 <!DOCTYPE html> <!-- To change this license header, choose License Headers in Project Properties. To change this template file, choose Tools | Templates and open the template in the editor. --> <html> <head>

Easyui datagrid 单元格格式化函数formatter的使用

$('#dg').datagrid({ columns:[[ {field:'userId',title:'User', width:80, formatter: function(value,row,index){ if (row.user){ return row.user.name; } else { return value; } } } ]] }); 以上是通过JS来进行调用 单元格格式化函数formatter带三个参数: value:单元格的字段值 rowData:该单元格所在行的行

easyui datagrid 单元格编辑保存

要求分数和排序两列能编辑 //查询该试卷题型的试题 $('#allList1').datagrid({ url:app.approot+"paperRes/getPaperQuestionList/"+ptyid, handler:function(){ //接受改变的值 $('#allList1').datagrid('acceptChanges'); }, onBeforeEdit: function (rowIndex,rowData) { $("#selQuestio

easyui datagrid 单元格编辑 自动聚焦 、全选

$.extend($.fn.datagrid.methods, { editCell: function (jq, param) { return jq.each(function () { var opts = $(this).datagrid('options'); var fields = $(this).datagrid('getColumnFields', true).concat($(this).datagrid('getColumnFields')); for (var i = 0

js循环生成多个easyui datagrid数据网格时,初始化表格

$.each( content, function(i, item){ var info_tpl = "";var result_tpl = "";var pre = /\<+\s*([a-z]+)\s*/; info_tpl += "<div class='result-info'>" + "<p>[执行SQL:("+i+")]</p>" + "<