EasyUI -简单实现（交互，分页，列表）

为什么80%的码农都做不了架构师？>>>   

准备工作：

1.首先导入EasyUI对应的样式和js

<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/demo.css">
<script type="text/javascript" src="../../easyui/jquery.min.js"></script>
<script type="text/javascript" src="../../easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${path }/easyui/locale/easyui-lang-zh_CN.js"></script>

2.因为通常用到日期格式，所以导入日期格式的js

<script type="text/javascript" src="${path }/js/dateFormat.js"></script>

3.在JSP里面创建一个存储查询数据的table

    <div class="list">
        <table class="easyui-datagrid" title="广告列表" style="width:auto;height:550px" id="dg"></table>
    </div>

---

实现（类似下面的数据表）：

1.表格中列元素和单元格的值，表中数据是EasyUI中通过Ajax异步通过controller从后台数据库中取得

2.插曲：日期格式（因为用到了yyMMdd hh:mm:ss的格式，所以先列出实现）

<script type="text/javascript">
Date.prototype.Format = function (fmt) { //author: meizz 
    var o = {
        "M+": this.getMonth() + 1, //月份 
        "d+": this.getDate(), //日 
        "h+": this.getHours(), //小时 
        "m+": this.getMinutes(), //分 
        "s+": this.getSeconds(), //秒 
        "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
        "S": this.getMilliseconds() //毫秒 
    };
    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
}
</script>

3.easyUI套装格式：$(document).ready(function(){$('#dg').datagrid({......});});

var type;
$(document).ready(
    function(){
    type = $("#adtype").val();
    //加载表格数据
    $('#dg').datagrid({
        url : '../advertM/toAdtList?type='+type+'&status=0',//制定获取list数据controller路径
        pagination : true,
        pagePosition : 'bottom',
        pageNumber : 1,
        rownumbers : true,
        pageSize : 10,
        pageList : [ 1, 2, 3, 5, 10 ],
        columns : [ [ {..},{...},{....}]], //列和值
        toolbar : [ {....},{....}]   //顶部按钮
    });
    //其他方法，加载东西做待用eg:
     $('#Imagehint_form').form({....});
    //页面加载时，还可以有很多方法
      ............
    });

4.列和值（columns:[[{.....},{........}]]）

    {
        field : 'ck',
        title : '',
        checkbox : "true",
        align : 'center'
    },
    {
        field : 'id',
        title : '编号',
        width : 100,
        align : 'center'
    },
    {
        field : 'type',
        title : '广告类型',
        width : 150,
        align : 'center',
        formatter: function(value,row,index){
            var result="默认类型";
            if(value==0){
                result = "类型1";
            }else if(value==1){
                result = "类型2";
            }             
            return result;
        }
    },
    {field:'adStartTime',title:'起始时间',width:150,align:'center',
           formatter: function(value,row,index){
             var unixTimestamp="";
             if(value!=null)
             {
                 unixTimestamp = new Date(value).Format("yyyy/MM/dd hh:mm:ss");  
             }
             return unixTimestamp;  
        }   
    }

5.按钮(toolbar)

    {
        iconCls : 'icon-redo',
        text : '新建',
        handler : function() {
            add();     //新增
        }
    },
    {},
    {
        text : '状态筛选：',
    },
    {
        iconCls : 'icon-search',
        text : '全部',
        handler : function() {
        //本身的按钮，可以指定路径对当前数据筛选
            $('#dg').datagrid({
                url : '../advertM/toAdtList?type='+type+'&status=0'
             });
        }
    }

6.controller对应的路径

    @RequestMapping("/toAdtList")
    @ResponseBody                //异步的
    public Map<String, Object> lstAdvertList(HttpServletRequest request, String rows,
                String page,int type,int status) {
        Map<String, Object> m = new HashMap<String, Object>();
        m.put("type", type);
        if(status > 0){
            m.put("status", status);
        }
        int size = Integer.parseInt(rows);
        int pageNo = Integer.parseInt(page);
        Pagination<Advert> advertPage = advertService.getPaging(pageNo, size, m);
        Map<String, Object> result = new HashMap<String, Object>();
        result.put("total", advertPage.getTotalCount());
        result.put("rows", advertPage.getList());
        return result;
    }

7.easyUI的分页

总共需要传递两个参数给JSP，一个是数量total,一个是数据list.

 

有局限，仅供参考！

转载于:https://my.oschina.net/gxiao/blog/550076