struts2和Jquery EasyUI整合数据查询(DataGrid)一

(原创,转载请注明)

最近在项目中很爱偷懒,于是用Jquery EasyUi处理分页,省去了要处理的分页参数信息。相比ExtJsEasyUi的体积还是小多了,上手也容易多了;再相比Jquery UI,就不用说了,压根就没有DataGird

 

先看效果图

 


struts2和Jquery EasyUI整合数据查询(DataGrid)一_第1张图片

 

准备工作:

Struts2类库:


 

 struts2和Jquery EasyUI整合数据查询(DataGrid)一_第2张图片

Json类库:

 

 

 

 

Jquery EasyUI



 

当然还包括Jqueryjs库:



 

 

先看后台的类设计图:

 

 

 


struts2和Jquery EasyUI整合数据查询(DataGrid)一_第3张图片

 

看着挺多,其实写起来挺简单,本来可以用泛型把所有业务统一起来,但struts2对泛型有bug(不知道现在的版本解决没),当实例化泛型类时,一半概率会报ClassCastException。而且初学者看着一堆的泛型、抽象类、抽象方法很容易晕,所以用此设计,故不用原来的设计,这样做保证了代码安全稳定,付出的代价是写了不少重复代码。

 

 

然后再看代码:

前台页面:

orderlist.jsp

 

要包括的ui:

<link rel="stylesheet" type="text/css" href="<s:url value="/ui/themes/default/easyui.css"/>">

 

<link rel="stylesheet" type="text/css" href="<s:url value="/ui/themes/icon.css"/>">

 

<script type="text/javascript" src="<s:url value="/js/jquery-1.4.2.min.js"/>"></script>

 

<script type="text/javascript" src="<s:url value="/ui/jquery.easyui.min.js"/>"></script>

 

<script type="text/javascript" src="<s:url value="/ui/easyui-lang-zh_CN.js"/>"></script>

我用的是绝对路径,用的struts2s:url标签,所以不要忘了引入struts2的标签库

<%@taglib prefix="s" uri="/struts-tags"%>

 

以上是在页面头包引入的库

 

真正的代码在下面:

 

<body>

    <table id="dataGrid"></table>

</body>

 

就这么一点点

 

当然,还要在一开始做初始化,以下代码直接在head标签内接着上面引入库后写就行。

 

<script type="text/javascript">

$(function(){

       //这个#dataGrid一定要和以上tableid对应

           $('#dataGrid').datagrid({

               title:'订单查询',

               width:910,

               height:400,

               nowrap: false,

               striped: true,

               collapsible:false,

               url:'<s:url value="/manage/queryOrder.action"/>',

               remoteSort: true,

               idField:'id',

               loadMsg:'装载中...',

               columns:[[

                   {field:'id',title:'订单号',width:50,align:'center'},

                   {field:'lastName',title:'',width:60,align:'center'},

                   {field:'firstName',title:'',width:60,align:'center'},

                   {field:'roomName',title:'房型名称',width:130,align:'center'},

                   {field:'roomNum',title:'订房数量',width:50,align:'center'},

                   {field:'orderDate',title:'下单日期',width:110,align:'center'},

                   {field:'liveDate',title:'住店日期',width:80,align:'center'},

                   {field:'leaveDate',title:'离店日期',width:80,align:'center'},

                   {field:'price',title:'总价格',width:100,align:'center'},

                   {field:'opt',title:'操作',width:95,align:'center',

                            formatter:function(value,rec){

                                return "<a href='<%=request.getContextPath()%>/manage/viewOrder.action?orderId=" + rec.id + "'>查看</a>&nbsp;&nbsp;<a href='<%=request.getContextPath()%>/manage/deleteOrder.action?orderId=" + rec.id + "'>删除</a>";

                            }

                   }

               ]],

               pagination:true,

               rownumbers:false

       });

 

    //其实上面就够了,下面纯属为了手动改dataGrid页脚下那些分页参数的label显示

       var p = $('#dataGrid').datagrid('getPager');

       if (p){

           $(p).pagination({

               beforePageText:"",

               afterPageText:"{pages}",

               displayMsg:"{total}条记录"

           });

       }

   });

</script>

 

看到代码应该不用解释了吧,很简单,看着字段名就知道怎么设置

再看看后台代码(太长,请接二)

 

你可能感兴趣的:(JavaScript,jquery,json,UI,css)