Jquery LigerUI-表格的使用

2024-02-29 20:38
文章标签 javascript 使用 表格 jquery frontend ligerui

本文主要是介绍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格式如何得到的，请期待下篇文章。

 

这篇关于Jquery LigerUI-表格的使用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/759992。

相关文章

JS+HTML实现在线图片水印添加工具

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的
阅读更多...
前端CSS Grid 布局示例详解

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统，可以同时控制行和列，相比Flex（一维布局），更适合用在整体页面布局或复杂模块结构中,：本文主要介绍前端CSSGri... 目录css Grid 布局详解（通俗易懂版）一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行
阅读更多...
shell编程之函数与数组的使用详解

shell编程之函数与数组的使用详解

《shell编程之函数与数组的使用详解》：本文主要介绍shell编程之函数与数组的使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录shell函数函数的用法俩个数求和系统资源监控并报警函数函数变量的作用范围函数的参数递归函数shell数组获取数组的长度读取某下的
阅读更多...
使用Python开发一个带EPUB转换功能的Markdown编辑器

使用Python开发一个带EPUB转换功能的Markdown编辑器

《使用Python开发一个带EPUB转换功能的Markdown编辑器》Markdown因其简单易用和强大的格式支持,成为了写作者、开发者及内容创作者的首选格式,本文将通过Python开发一个Markd... 目录应用概览代码结构与核心组件1. 初始化与布局 (__init__)2. 工具栏 (setup_t
阅读更多...
Python虚拟环境终极(含PyCharm的使用教程)

Python虚拟环境终极(含PyCharm的使用教程)

《Python虚拟环境终极(含PyCharm的使用教程)》：本文主要介绍Python虚拟环境终极(含PyCharm的使用教程),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,... 目录一、为什么需要虚拟环境？二、虚拟环境创建方式对比三、命令行创建虚拟环境（venv）3.1 基础命令3
阅读更多...
Python Transformer 库安装配置及使用方法

Python Transformer 库安装配置及使用方法

《PythonTransformer库安装配置及使用方法》HuggingFaceTransformers是自然语言处理（NLP）领域最流行的开源库之一,支持基于Transformer架构的预训练模... 目录python 中的 Transformer 库及使用方法一、库的概述二、安装与配置三、基础使用：Pi
阅读更多...
关于pandas的read_csv方法使用解读

关于pandas的read_csv方法使用解读

《关于pandas的read_csv方法使用解读》：本文主要介绍关于pandas的read_csv方法使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录pandas的read_csv方法解读read_csv中的参数基本参数通用解析参数空值处理相关参数时间处理相关
阅读更多...
前端下载文件时如何后端返回的文件流一些常见方法

前端下载文件时如何后端返回的文件流一些常见方法

《前端下载文件时如何后端返回的文件流一些常见方法》：本文主要介绍前端下载文件时如何后端返回的文件流一些常见方法,包括使用Blob和URL.createObjectURL创建下载链接,以及处理带有C... 目录1. 使用 Blob 和 URL.createObjectURL 创建下载链接例子：使用 Blob
阅读更多...
使用Node.js制作图片上传服务的详细教程

使用Node.js制作图片上传服务的详细教程

《使用Node.js制作图片上传服务的详细教程》在现代Web应用开发中,图片上传是一项常见且重要的功能,借助Node.js强大的生态系统,我们可以轻松搭建高效的图片上传服务,本文将深入探讨如何使用No... 目录准备工作搭建 Express 服务器配置 multer 进行图片上传处理图片上传请求完整代码示例
阅读更多...
Vuex Actions多参数传递的解决方案

Vuex Actions多参数传递的解决方案

《VuexActions多参数传递的解决方案》在Vuex中,actions的设计默认只支持单个参数传递,这有时会限制我们的使用场景,下面我将详细介绍几种处理多参数传递的解决方案,从基础到高级,... 目录一、对象封装法（推荐）二、参数解构法三、柯里化函数法四、Payload 工厂函数五、TypeScript
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2