關於easyui datagrid 表格數據處理

首先先將easyui 引入到jsp頁面中

<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="easyui/demo.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>

<!--將一些英文轉變為中文格式引入下面的js即可c-->
<script type="text/javascript" src="js/easyui-lang-zh_CN.js"></script>

第二步：

  找到對應的easyui demo 復制代碼 1 <div id="table" align="center"> 2 <table id="dg" class="easyui-datagrid" title="公告信息列表"

  jsp頁面

    <div id="table" align="center">
    <table id="dg" class="easyui-datagrid" title="公告信息列表"

       style="width:100%;height:400px"

 data-options="  5  rownumbers:true,  6  url:'notice/findNotice',url地址  7  method:'post',請求方式  8  pagination:true,  9  pageSize:10,每頁數據條數 10  pageList:[5,10,15], 11  toolbar:'#tb',在頭部添加查詢條件 12  footer:'#ft'" 在尾部添加一些功能按鈕
 > 13 <thead> 14 <tr> 15 <th data-options="field:'ck',checkbox:'true'"></th> 加入多選款 16 <th data-options="field:'code',width:120">編號</th> 17 <th data-options="field:'title',width:120" align="center">標題</th> 18 <th data-options="field:'currentStrTime',width:150" align="center">發布時間</th> 19 <th data-options="field:'creater',width:100," align="center">發布人</th> 20 <th data-options="field:'content',width:260" align="center">內容</th> 21 <th data-options="field:'status',width:60,align:'center'" 22  align="center">公告狀態</th> 23 </tr> 24 </thead> 25 </table>
 <!--頭部的查詢條件按鈕（可刪除不要）--> 26 <div id="tb" style="padding:2px 5px;"> 27 時間段 從: <input id="time1" class="easyui-datebox" style="width:130px"> 28 到: <input id="time2" class="easyui-datebox" style="width:130px"> 29 創建者/部門: <select id="dep" class="easyui-combobox" panelHeight="auto" 30  style="width:130px"> 31 <option value="0">--請選擇--</option> 32 <c:forEach items="${deps}" var="dep"> 33 <option value="${dep.name}">${dep.name}</option> 34 </c:forEach> 35 </select> <a href="javascript:void(0)" onclick="searchNotice()" 36  class="easyui-linkbutton" iconCls="icon-search">查詢</a> 37 </div>
 <!--尾部的的功能按鈕（可刪除不要）需要的自行寫或者查詢easyui API-- >
 38 <div id="ft" style="padding:2px 3px;"> 39 <shiro:hasPermission name="notice:add"> 40 <a href="notice/toAdd" class="easyui-linkbutton" iconCls="icon-add" 41  plain="true">添加</a> 42 </shiro:hasPermission> 43 <shiro:hasPermission name="notice:update"> 44 <a href="javacsript:void(0)" onclick="updateNotice()" 45  class="easyui-linkbutton" iconCls="icon-edit" plain="true">修改</a> 46 </shiro:hasPermission> 47 <shiro:hasPermission name="notice:delete"> 48 <a href="javacsript:void(0)" onclick="deleteNotice()" 49  class="easyui-linkbutton" iconCls="icon-remove" plain="true">刪除</a> 50 </shiro:hasPermission> 51 <shiro:hasPermission name="notice:list"> 52 <a href="javacsript:void(0)" onclick="findNotice()" class="easyui-linkbutton" iconCls="icon-save" 53  plain="true">查看</a> 54 </shiro:hasPermission> 55 </div> 56 </div>

第三步 java代碼（無條件分頁查詢）注意返回的是json格式的數據 rows（需要返回的數據）和 total （數據的總記錄數）

@RequestMapping("/findNotice")
    @RequiresPermissions("notice:list")
    @ResponseBody
    public Map<String,Object> findNotice(NoticeBean noticeBean) {
        System.out.println(noticeBean);
        Map<String,Object> map=new HashMap<String, Object>();
        int total=0;
        List<Notice> list=null;
        
            total=noticeService.findTotalBySearch(noticeBean);
            list=noticeService.findByPageSearch(noticeBean);
            System.out.println(total);
            System.out.println(list);
        
        map.put("rows", list);
        map.put("total",total);
        return map;

    }

有條件的分頁查詢（可參考我的，也可自行）

@RequestMapping("/findNotice")
    @RequiresPermissions("notice:list")
    @ResponseBody
    public Map<String,Object> findNotice(NoticeBean noticeBean) {
        System.out.println(noticeBean);
        Map<String,Object> map=new HashMap<String, Object>();
        int total=0;
        List<Notice> list=null;
        if((noticeBean.getTime1()==null || "".equals(noticeBean.getTime1()))&&(noticeBean.getCreater()==null ||"0".equals(noticeBean.getCreater())||"".equals(noticeBean.getCreater()))){
            total=noticeService.findTotal();
            list=noticeService.findPage(noticeBean.getPage(),noticeBean.getRows());
        }else{
            total=noticeService.findTotalBySearch(noticeBean);
            list=noticeService.findByPageSearch(noticeBean);
            System.out.println(total);
            System.out.println(list);
        }
        map.put("rows", list);
        map.put("total",total);
        return map;

    }

 

獲得多選框選擇的數據

var rows = $('#dg').datagrid('getSelections');
for(var i=0; i<rows.length; i++){
var code=rows[i].code;

}

獲得時間框數據

$('#time1').datebox('getValue')

獲得下拉框數據

$('#dep').combobox('getValue')

其他的自行查看API

官網 http://www.jeasyui.net