Jquery LigerUI-表格的使用

LigerUI与EasyUI

    LigerUI与EasyUI一样，都是一个基于jquery的集成了各种用户界面的框架,包括我们常用的表单、表格等常用的控件，使用它们都可以快速的创建风格统一的界面效果。LigerUI与EasyUI相比，LigerUI的用户量不如EasyUI，所以在使用LigerUI过程中遇到问题，寻找解决方案不像EasyUI那么容易；但是LigerUI它是开源的，当我们遇到问题时可以修改LigerUI的源代码来解决问题。

 

    我实习的项目，开发语言是Java，使用的框架是LigerUI+SSH，下面进入我们今天的正题，LigerUI的表格。

 

 

LigerUI表格效果

 

下面这张图是我们整个页面，我们主要看下表格

 

 

 

表格前台标签

 

<divid="maingrid"></div>

 

LigerUI表格的数据加载的是Json格式，下面我们看下Json格式的数据：

 

[plain] view plain copy

1. {  
2.     "Total": 49,  
3.     "Rows": [  
4.         {  
5.             "id": 2049,  
6.             "bookingId":"702645678909876520141104",  
7.             "companyId":"456789098765",  
8.             "bookingDate":"2014-11-04",  
9.             "bookingTime":"9:30",  
10.             "bookingPlace":"海淀区医保中心预约大厅",  
11.             "bookingThing":"医疗费用报销取号预约",  
12.             "bookingType":"日后办理",  
13.             "bookingState":"0",  
14.             "companyName": "fdfdsf",  
15.             "insuranceName":"基本医疗",  
16.             "insuranceAmount":"7"  
17.         },  
18.         {  
19.             "id": 2050,  
20.             "bookingId":"648045678909876520141104",  
21.             "companyId":"456789098765",  
22.             "bookingDate":"2014-11-04",  
23.             "bookingTime":"9:30",  
24.             "bookingPlace":"海淀区医保中心预约大厅",  
25.             "bookingThing":"医疗费用报销取号预约",  
26.             "bookingType":"即时办理",  
27.             "bookingState":"0",  
28.             "companyName":"456789098765",  
29.             "insuranceName":"离休人员",  
30.             "insuranceAmount":"5"  
31.         },  
32.         {  
33.             "id": 2050,  
34.             "bookingId":"648045678909876520141104",  
35.             "companyId":"456789098765",  
36.             "bookingDate":"2014-11-04",  
37.             "bookingTime":"9:30",  
38.             "bookingPlace":"海淀区医保中心预约大厅",  
39.             "bookingThing":"医疗费用报销取号预约",  
40.             "bookingType":"即时办理",  
41.             "bookingState":"0",  
42.             "companyName":"456789098765",  
43.             "insuranceName":"基本医疗",  
44.             "insuranceAmount":"5"  
45.         },  
46.         {  
47.             "id": 2051,  
48.             "bookingId":"705245678909876520141103",  
49.             "companyId":"456789098765",  
50.             "bookingDate":"2014-11-03",  
51.             "bookingTime":"9:15",  
52.             "bookingPlace":"海淀区医保中心预约大厅",  
53.             "bookingThing":"医疗费用报销取号预约",  
54.             "bookingType":"即时办理",  
55.             "bookingState":"0",  
56.             "companyName":"456789098765",  
57.             "insuranceName":"生育保险",  
58.             "insuranceAmount":"7"  
59.         },  
60.         {  
61.             "id": 2051,  
62.             "bookingId":"705245678909876520141103",  
63.             "companyId":"456789098765",  
64.             "bookingDate":"2014-11-03",  
65.             "bookingTime":"9:15",  
66.             "bookingPlace":"海淀区医保中心预约大厅",  
67.             "bookingThing":"医疗费用报销取号预约",  
68.             "bookingType":"即时办理",  
69.             "bookingState":"0",  
70.             "companyName":"456789098765",  
71.             "insuranceName":"基本医疗",  
72.             "insuranceAmount":"5"  
73.         },  
74.         {  
75.             "id": 2052,  
76.             "bookingId":"219334567890987620141104",  
77.             "companyId":"345678909876",  
78.             "bookingDate":"2014-11-04",  
79.             "bookingTime":"9:30",  
80.             "bookingPlace":"海淀区医保中心预约大厅",  
81.             "bookingThing":"医疗费用报销取号预约",  
82.             "bookingType":"即时办理",  
83.             "bookingState":"0",  
84.             "companyName":"fd",  
85.             "insuranceName":"基本医疗",  
86.             "insuranceAmount":"6"  
87.         },  
88.         {  
89.             "id": 2053,  
90.             "bookingId":"183934567890987620141104",  
91.             "companyId":"345678909876",  
92.             "bookingDate":"2014-11-04",  
93.             "bookingTime":"9:30",  
94.             "bookingPlace":"海淀区医保中心预约大厅",  
95.             "bookingThing":"医疗费用报销取号预约",  
96.             "bookingType":"日后办理",  
97.             "bookingState":"0",  
98.             "companyName":"345678909876",  
99.             "insuranceName":"基本医疗",  
100.             "insuranceAmount":"6"  
101.         },  
102.         {  
103.             "id": 2063,  
104.             "bookingId":"877843212323232320141103",  
105.             "companyId":"432123232323",  
106.             "bookingDate":"2014-11-03",  
107.             "bookingTime":"9:15",  
108.             "bookingPlace":"海淀区医保中心预约大厅",  
109.             "bookingThing":"医疗费用报销取号预约",  
110.             "bookingType":"即时办理",  
111.             "bookingState":"0",  
112.             "companyName":"发热",  
113.             "insuranceName":"基本医疗",  
114.             "insuranceAmount":"7"  
115.         },  
116.         {  
117.             "id": 2065,  
118.             "bookingId":"756934567890987620141103",  
119.             "companyId":"345678909876",  
120.             "bookingDate":"2014-11-03",  
121.             "bookingTime":"9:15",  
122.             "bookingPlace":"海淀区医保中心预约大厅",  
123.             "bookingThing":"医疗费用报销取号预约",  
124.             "bookingType":"即时办理",  
125.             "bookingState":"0",  
126.             "companyName":"沟通",  
127.             "insuranceName":"基本医疗",  
128.             "insuranceAmount":"7"  
129.         },  
130.         {  
131.             "id": 2066,  
132.             "bookingId":"137523456543212320141104",  
133.             "companyId":"234565432123",  
134.             "bookingDate":"2014-11-04",  
135.             "bookingTime":"9:30",  
136.             "bookingPlace":"海淀区医保中心预约大厅",  
137.             "bookingThing":"医疗费用报销取号预约",  
138.             "bookingType":"日后办理",  
139.             "bookingState":"0",  
140.             "companyName":"发呆",  
141.             "insuranceName":"基本医疗",  
142.             "insuranceAmount":"5"  
143.         }  
144.     ]  
145. }  

 

 

LigerUI表格加载的Json与EasyUI相比是一模一样的，下面我们看下js是如何加载表格的

 

表格加载数据

 

   

[javascript] view plain copy

1.       $(function ()  
2.       {               
3.     //加载表格  
4.     showInfo();  
5.       });  
6. //showInfo往后台action提交请求，同时获取后台数据  
7.       function showInfo(keyWord){  
8.     var url = 'statisticalQuery_list.action';  
9.     if(keyWord){  
10.         keyWord = encodeURI(encodeURI(keyWord));  
11.         url = url + '?keyWord='+keyWord;  
12.     }  
13.     $("#maingrid").ligerGrid({  
14.                 columns: [  
15.                 {  
16.                     display : '主键',  
17.                     name : 'id',  
18.                     align : 'left',  
19.                     hide: 'true',  
20.                     width : 120  
21.                 },{  
22.                     display : "预约号",  
23.                     name : 'bookingId',  
24.                     width : 180,  
25.                     type : "text",  
26.                     align : "left"  
27.                 }, {  
28.                     display : "企业名称",  
29.                     name : "companyName",  
30.                     width : 180,  
31.                     type : "text",  
32.                     align : "left"  
33.                 }, {  
34.                     display : "社保号",  
35.                     name : "companyId",  
36.                     width : 180,  
37.                     type : "text",  
38.                     align : "left"  
39.                 }, {  
40.                     display : "保险类型",  
41.                     name : "insuranceName",  
42.                     width : 100,  
43.                     type : "date",  
44.                     align : "left"  
45.                 }, {  
46.                     display : "单据份数",  
47.                     name : "insuranceAmount",  
48.                     width : 100,  
49.                     type : "date",  
50.                     align : "left"  
51.                 },  {  
52.                     display : "预约日期",  
53.                     name : "bookingDate",  
54.                     width : 180,  
55.                     type : "date",  
56.                     align : "left"  
57.                 },{  
58.                     display : "预约时间",  
59.                     name : "bookingTime",  
60.                     width : 180,  
61.                     type : "date",  
62.                     align : "left"  
63.                 }  
64.                 ],   
65.                 dataAction: 'server',   
66.                 //data: data,  
67.                 url:url,    
68.                 sortName: 'id',  
69.                 width: '98%',   
70.                 height: '95%',   
71.                 pageSize: 10,  
72.                 rownumbers:true,  
73.                 checkbox : false,  
74.                 heightDiff: -6,  
75.                 onAfterShowData  : show,   
76.                     //单机表格，跳转统计页面，  
77.                 onSelectRow : function (urlAll, rowindex, rowobj)  
78.                 {  
79.                     //onClickCell    (rowIndex, field, value)  
80.                     //获取变量  
81.                     var startDateStr=document.getElementById("startDate").value;  
82.                     var endDateStr=document.getElementById("endDate").value;  
83.                     var companyIdStr=urlAll.companyId;   
84.                     var companyNameStr= urlAll.companyName;   
85.   
86.                         var urlAll="statisticalQuery_toDetail.action?startDateStr="+startDateStr+ "&endDateStr=" + endDateStr+ "&companyIdStr=" + companyIdStr+ "&companyNameStr=" + companyNameStr;  
87.                         top.f_addTab(null, '预约统计详细信息', urlAll);  
88.                     }  
89.             });  
90. }  

 

 

在上面的js中，通过url将要查询的条件传到指定的action，action再调用相应业务逻辑进行查询，将查询到的结果返回给前台，前台即可加载数据。

 

 

最后

还记得1月份的时候用EasyUI开发时，当时Json格式的数据是在后台利用循环拼接字符串得到的，而这次关于LigerUI表格加载的Json数据，我们这次并不是采用拼接字符串得到的，具体Json格式如何得到的，请期待下篇文章。