Jquery EasyUI操作表格,分頁顯示

jopen 11年前發布 | 222K 次閱讀 jQuery Ajax框架 jQuery EasyUI

  1. JSP頁面代碼
    <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
    <%@ taglib uri="
            $(function(){
    $('#test').datagrid({
    title:'我的表格',
    iconCls:'icon-save',
    width:700,
    height:350,
    nowrap: true,
    autoRowHeight: false,
    striped: true,
    collapsible:true,
    url:'showAllUser.action', //服務器地址,返回json格式數據 sortName: 'code',
    sortOrder: 'desc',
    remoteSort: false,
    idField:'code',
    frozenColumns:[[
    {field:'ck',checkbox:true},
    {title:'代碼',field:'code',width:80,sortable:true}
    ]],
    columns:[[
    {title:'基本信息',colspan:3},
    {field:'opt',title:'操作',width:100,align:'center', rowspan:2,
    formatter:function(value,rec,index){
    return '<span style="color:red"><a href="#" onclick="testSave('+rec.code+')">修改</a> <a href="">刪除</a></span>';
    }
    }
    ],[
    {field:'name',title:'姓名',width:120},
    {field:'addr',title:'地址',width:220,rowspan:2,sortable:true,
    sorter:function(a,b){
    return (a>b?1:-1);
    }
    },
    {field:'col4',title:'第4列',width:150,rowspan:2}
    ]],
    pagination:true, //分頁控件 rownumbers:true, //行號 toolbar:[{
    id:'btnadd',
    text:'添加',
    iconCls:'icon-add',
    handler:function(){
    $('#btnsave').linkbutton('enable');
    alert('這里是添加的代碼')
    }
    },{
    id:'btncut',
    text:'剪切',
    iconCls:'icon-cut',
    handler:function(){
    $('#btnsave').linkbutton('enable');
    alert('這里是剪切的代碼')
    }
    },'-',{
    id:'btnsave',
    text:'保存',
    disabled:true,
    iconCls:'icon-save',
    handler:function(){
    $('#btnsave').linkbutton('disable');
    alert('這里是保存的代碼')
    }
    }]
    });
    var p = $('#test').datagrid('getPager');
    $(p).pagination({
    pageSize: 10,//每頁顯示的記錄條數,默認為10 pageList:[5,10,15,20],//每頁顯示幾條記錄 beforePageText: '第',//頁數文本框前顯示的漢字 afterPageText: '頁    共 {pages} 頁', displayMsg: '當前顯示 {from} - {to} 條記錄    共 {total} 條記錄', onBeforeRefresh:function(){
    $(this).pagination('loading');//正在加載數據中... alert('before refresh'); $(this).pagination('loaded'); //數據加載完畢 }
    });
    });
    function resize(){
    $('#test').datagrid('resize', {
    width:700,
    height:400
    });
    }
    function getSelected(){
    var selected = $('#test').datagrid('getSelected');
    if (selected){
    alert(selected.code+":"+selected.name+":"+selected.addr+":"+selected.col4);
    }
    }
    function getSelections(){
    var ids = [];
    var rows = $('#test').datagrid('getSelections');
    for(var i=0;i<rows.length;i++){
    ids.push(rows[i].code+":"+rows[i].name+":"+rows[i].addr+":"+rows[i].col4);
    }
    alert(ids.join(':'));
    }
    function clearSelections(){
    $('#test').datagrid('clearSelections');
    }
    function selectRow(){
    $('#test').datagrid('selectRow',2);
    }
    function selectRecord(){
    $('#test').datagrid('selectRecord','002');
    }
    function unselectRow(){
    $('#test').datagrid('unselectRow',2);
    }
    function mergeCells(){
    $('#test').datagrid('mergeCells',{
    index:2,
    field:'addr',
    rowspan:2,
    colspan:2
    });
    }

        function testSave(value){
          alert('測試保存'+value);
        } 
    </script>
    </head>
    <body>
        <h2>
            復雜數據表格 - Complex DataGrid
        </h2>
        <div class="demo-info">
            <div class="demo-tip icon-tip"></div>
            <div>
                單擊按鈕試驗數據表格各項功能。
                <br>
            </div>
        </div>
    
        <div style="margin: 10px 0;">
            <a href="#" class="easyui-linkbutton" data-options="plain:true" onclick="getSelected()">取得選中項</a>
            <a href="#" class="easyui-linkbutton" data-options="plain:true" onclick="getSelections()">取得所有</a>
            <a href="#" class="easyui-linkbutton" data-options="plain:true" onclick="selectRow()">選擇行(2)</a>
            <a href="#" class="easyui-linkbutton" data-options="plain:true" onclick="selectRecord()">通過ID選擇行(002)</a>
            <a href="#" class="easyui-linkbutton" data-options="plain:true" onclick="unselectRow()">取消行檢查</a>
            <a href="#" class="easyui-linkbutton" data-options="plain:true" onclick="clearSelections()">取消已選</a>
            <a href="#" class="easyui-linkbutton" data-options="plain:true" onclick="resize()">縮放布局(W:700H:400</a>
            <a href="#" class="easyui-linkbutton" data-options="plain:true" onclick="mergeCells()">合并單元格</a>
        </div>
    
        <table id="test">
    
        </table>
    </body>
    

    </html></pre></li>

  2. Action(采用Struts2,注意導入struts2對json支持的插件jar包,User已省略)
    package com.jingyoutimes.web.action;

    import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map;

    import net.sf.json.JSONObject;

    import com.jingyoutimes.domain.User; import com.opensymphony.xwork2.ActionSupport;

    public class PageAction extends ActionSupport { private JSONObject result;//返回的json

    private String rows;//每頁顯示的記錄數 
    
    private String page;//當前第幾頁  
    
    
    public String showAllUserAction() throws Exception {
        //當前頁,page由分頁工具負責傳過來
        int intPage = Integer.parseInt((page == null || page == "0") ? "1":page); 
        //每頁顯示條數 
        int number = Integer.parseInt((rows == null || rows == "0") ? "10":rows); 
        //每頁的開始記錄  第一頁為1  第二頁為number +1  
        int start = (intPage-1)*number;  
        Map<String, Object> jsonMap = new HashMap<String, Object>();//定義map 
        List<User> users = new ArrayList<User>();//每一頁存放的數據
        for(int i = start;i < (start+number);i ++){
            User user = new User();
            user.setCode("00"+i);
            user.setName("姓名"+i);
            user.setAddr("地址"+i);
            users.add(user);
        }
        jsonMap.put("total", 20);//total鍵 存放總記錄數,必須的 ,EasyUI根據這個參數,可以計算page和number的值,這個值不是users的長度
        jsonMap.put("rows", users);//rows鍵 存放每頁記錄 list 
        result = JSONObject.fromObject(jsonMap);//格式化result   一定要是JSONObject  
        return SUCCESS;
    }
    
    public JSONObject getResult() {
        return result;
    }
    
    public void setResult(JSONObject result) {
        this.result = result;
    }
    
    public String getRows() {
        return rows;
    }
    
    public void setRows(String rows) {
        this.rows = rows;
    }
    
    public String getPage() {
        return page;
    }
    
    public void setPage(String page) {
        this.page = page;
    }
    

    } </pre></li>

  3. struts配置文件
    <?xml version="1.0" encoding="UTF-8" ?>
    <!DOCTYPE struts PUBLIC
        "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
        ";

    <struts> <constant name="struts.enable.DynamicMethodInvocation" value="false" /> <constant name="struts.devMode" value="true" />

    <package name="default" namespace="/" extends="struts-default">
        <result-types>
            <result-type name="json"
                class="org.apache.struts2.json.JSONResult" />
        </result-types>
    
        <action name="showAllUser" class="com.jingyoutimes.web.action.PageAction" method="showAllUserAction">
           <result type="json">  
                <param name="root">result</param>  
            </result>
        </action>
    </package>
    

    </struts></pre>
    【可以先完全復制上面的代碼,根據自己的需要進行修改。只要做好了配置,直接訪問JSP頁面即可。話不多說,看看效果吧!】20131111155108000.jpg</li> </ol>


    來自:http://blog.csdn.net/syb18810107241/article/details/14524183

 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!