关于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="
             rownumbers:true,
             url:'notice/findNotice',url地址
             method:'post',请求方式
             pagination:true,
             pageSize:10,每页数据条数
             pageList:[5,10,15],
             toolbar:'#tb',在头部添加查询条件
             footer:'#ft'"  在尾部添加一些功能按钮
                 >
            <thead>
                <tr>
                    <th data-options="field:'ck',checkbox:'true'"></th>  加入多选款
                    <th data-options="field:'code',width:120">编号</th>
                    <th data-options="field:'title',width:120" align="center">标题</th>
                    <th data-options="field:'currentStrTime',width:150" align="center">发布时间</th>
                    <th data-options="field:'creater',width:100," align="center">发布人</th>
                    <th data-options="field:'content',width:260" align="center">内容</th>
                    <th data-options="field:'status',width:60,align:'center'"
                        align="center">公告状态</th>
                </tr>
            </thead>
        </table>
           <!--头部的查询条件按钮（可删除不要）-->
        <div id="tb" style="padding:2px 5px;">
            时间段 从: <input id="time1" class="easyui-datebox" style="width:130px">
            到: <input id="time2" class="easyui-datebox" style="width:130px">
            创建者/部门: <select id="dep" class="easyui-combobox" panelHeight="auto"
                style="width:130px">
                <option value="0">--请选择--</option>
                <c:forEach items="${deps}" var="dep">
                    <option value="${dep.name}">${dep.name}</option>
                </c:forEach>
            </select> <a href="javascript:void(0)" onclick="searchNotice()"
                class="easyui-linkbutton" iconCls="icon-search">查询</a>
        </div>
           <!--尾部的的功能按钮（可删除不要）需要的自行写或者查询easyui API-- >

        <div id="ft" style="padding:2px 3px;">
            <shiro:hasPermission name="notice:add">
                <a href="notice/toAdd" class="easyui-linkbutton" iconCls="icon-add"
                    plain="true">添加</a>
            </shiro:hasPermission>
            <shiro:hasPermission name="notice:update">
                <a href="javacsript:void(0)" onclick="updateNotice()"
                    class="easyui-linkbutton" iconCls="icon-edit" plain="true">修改</a>
            </shiro:hasPermission>
            <shiro:hasPermission name="notice:delete">
                <a href="javacsript:void(0)" onclick="deleteNotice()"
                    class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除</a>
            </shiro:hasPermission>
            <shiro:hasPermission name="notice:list">
                <a href="javacsript:void(0)" onclick="findNotice()" class="easyui-linkbutton" iconCls="icon-save"
                    plain="true">查看</a>
            </shiro:hasPermission>
        </div>
    </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