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. var urlAll="statisticalQuery_toDetail.action?startDateStr="+startDateStr+ "&endDateStr=" + endDateStr+ "&companyIdStr=" + companyIdStr+ "&companyNameStr=" + companyNameStr;
  86. top.f_addTab(null, '预约统计详细信息', urlAll);
  87. }
  88. });
  89. }

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

最后

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

Jquery LigerUI-表格的使用相关推荐

  1. jQuery LigerUI 使用教程入门篇

    jQuery LigerUI 使用教程入门篇 阅读目录 获取最新代码 ligerUI是什么 如何使用 如何扩展 获取最新代码 可以到http://ligerui.googlecode.com下载最新代 ...

  2. jQuery LigerUI 初次发布一睹为快(提供Demo下载)

    一,简介 jQuery LigerUI 是基于jQuery的一系列UI控件组合,包括表单.表格.提示框.窗口.布局等等.可以快速地创建风格统一大方的界面.因为是前端控件,跟服务器无关,可以适合.net ...

  3. jQuery LigerUI使用教程入门篇

    获取最新代码 可以到http://ligerui.googlecode.com下载最新代码. 简介 jQuery LigerUI 是基于jQuery的一系列UI控件组合,简单而又强大,致力于快速打造W ...

  4. java ligerui_[Java教程]jQuery LigerUI 使用教程入门篇_星空网

    jQuery LigerUI 使用教程入门篇 2012-01-17 0 阅读目录获取最新代码 ligerUI是什么 如何使用 如何扩展 获取最新代码 可以到http://ligerui.googlec ...

  5. jquery LigerUI是什么？

    jQuery LigerUI是基于jQuery而设计的一系列UI插件集合,其核心设计目标是快速开发.使用简单.功能强大.轻量级.易扩展,使用UI可以帮助开发者快速地创建友好的用户界面. 相关推荐:&l ...

  6. jquery计算表格列，求和

    jquery计算表格列,求和 有时候,需要统计网页上数据总数,系统没有提供该功能,需要手动计算,于是设计了这段代码 效果展示: 核心代码: $(function() {var totalRow = 0 ...

  7. 使用jquery合并表格中相同文本的相邻单元格

    一.效果 二.代码 <!DOCTYPE HTML> <html> <head><title>Example</title><meta ...

  8. 我的jQuery动态表格插件二

    本篇博客是我写在离职后,昨天刚辞职和交接完任务,准备离开.其实我有很多不舍,但是最终还是选择了离开,许多苦楚都埋在我的心底.哎,趁回成都找工作的机会是该好好休息一下了. 在上篇我的jQuery动态表格 ...

  9. jquery实现表格的多行删除

    初学jquery,发现自己比较脑残的一味百度,找到一些代码,就想着运行,出现问题不知道怎么解决. 下面介绍如何运用jquery实现表格的多行删除 首先如果你没有jquery类库,要先下载jquery类 ...

  10. 手机端html表格,jQuery Mobile 表格

    jQuery Mobile 表格 响应式表格 响应式设计一般用于适配用户各种移动设备. 我们只需要使用一个简单的类名,jQuery Mobile 就能根据屏幕的尺寸自动调整页面内容. 响应式表格让页面 ...

最新文章

  1. qemu模拟A9/A15运行Linux4.2.3
  2. 计算程序运行时间（time_t, clock_t）
  3. 原来你是这样的http2......
  4. ZOJ 3829 Known Notation（贪心）题解
  5. mouted vue 操作dom_vue中使用refs定位dom的坑-阿里云开发者社区
  6. pytest-allure测试报告
  7. 软件架构自学笔记---架构分析
  8. 如何用管程实现生产者消费者问题？
  9. 开源大数据生态下的 Flink 应用实践
  10. Python入门学习—元组/字符串（FishC）
  11. 带你画uml系统用例图
  12. 07 -MATLAB数值微积分与方程求解
  13. css中border属性设置
  14. 记一次戴尔灵越7000(7000-7591)的坑爹螺丝设计，中招了保修都没门
  15. 40个笑到抽筋的神回复，哈哈哈哈哈...
  16. 使用Vue解决跨域问题
  17. 支付宝支付-常用支付API详解(查询、退款、提现等)
  18. 怎么简单快速一个钟头入侵网站
  19. GD32F103 USB 虚拟U盘实验一（内部Flash）
  20. macbook自带python保存文件夹_在mac下查找python包存放路径site-packages的实现方法 在Mac系统下python如何安装第三方函数库?...

热门文章

  1. Python测试平台开发实战
  2. 简单实用！自媒体新手一天挣500，大周手把手教你制作免费片头
  3. PHP对接抖音小店接口的简单封装以及请求
  4. MySQL数据库5.7.20的下载与安装
  5. uniapp 绑定事件
  6. Excel文件打开时出现“***中的部分内容有问题，是否让我们尽量尝试恢复？”的解决方法
  7. 计算机毕设之化妆品管理系统
  8. 电视机需求与洗碗机需求
  9. 如何分析社交网络的宏观、中观以及微观特征分析
  10. Linux kernel启动过程