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。

相关文章

Vue3 的 shallowRef 和 shallowReactive：优化性能

Vue3 的 shallowRef 和 shallowReactive：优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉，那么对 shallowRef 和 shallowReactive 是否了解呢？ 在编程和数据结构中，“shallow”（浅层）通常指对数据结构的最外层进行操作，而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素，而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层（Shallow） 定义
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
中文分词jieba库的使用与实景应用（一）

中文分词jieba库的使用与实景应用（一）

知识星球：https://articles.zsxq.com/id_fxvgc803qmr2.html 目录 一.定义： 精确模式（默认模式）： 全模式： 搜索引擎模式： paddle 模式（基于深度学习的分词模式）： 二 自定义词典 三.文本解析   调整词出现的频率 四. 关键词提取 A. 基于TF-IDF算法的关键词提取 B. 基于TextRank算法的关键词提取
阅读更多...
【 html+css 绚丽Loading 】000046 三才归元阵

【 html+css 绚丽Loading 】000046 三才归元阵

前言：哈喽，大家好，今天给大家分享html+css 绚丽Loading！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介：💡2.外观描述：💡3.使用方式：💡4.战斗方式：💡5.提升：💡6.传说： 📚三、源代码，上代码，可以直接复制使用🎥效果🗂️目录✍️
阅读更多...
使用SecondaryNameNode恢复NameNode的数据

使用SecondaryNameNode恢复NameNode的数据

1）需求： NameNode进程挂了并且存储的数据也丢失了，如何恢复NameNode 此种方式恢复的数据可能存在小部分数据的丢失。 2）故障模拟 （1）kill -9 NameNode进程 [lytfly@hadoop102 current]$ kill -9 19886 （2）删除NameNode存储的数据（/opt/module/hadoop-3.1.4/data/tmp/dfs/na
阅读更多...
Hadoop数据压缩使用介绍

Hadoop数据压缩使用介绍

一、压缩原则 （1）运算密集型的Job，少用压缩 （2）IO密集型的Job，多用压缩 二、压缩算法比较 三、压缩位置选择 四、压缩参数配置 1）为了支持多种压缩/解压缩算法，Hadoop引入了编码/解码器 2）要在Hadoop中启用压缩，可以配置如下参数
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
Makefile简明使用教程

Makefile简明使用教程

文章目录 规则makefile文件的基本语法：加在命令前的特殊符号：.PHONY伪目标: Makefilev1 直观写法v2 加上中间过程v3 伪目标v4 变量 make 选项-f-n-C Make 是一种流行的构建工具，常用于将源代码转换成可执行文件或者其他形式的输出文件(如库文件、文档等)。Make 可以自动化地执行编译、链接等一系列操作。 规则 makefile文件
阅读更多...
使用opencv优化图片（画面变清晰）

使用opencv优化图片（画面变清晰）

文章目录 需求影响照片清晰度的因素 实现降噪测试代码 锐化空间锐化Unsharp Masking频率域锐化对比测试 对比度增强常用算法对比测试 需求 对图像进行优化，使其看起来更清晰，同时保持尺寸不变，通常涉及到图像处理技术如锐化、降噪、对比度增强等 影响照片清晰度的因素 影响照片清晰度的因素有很多，主要可以从以下几个方面来分析 1. 拍摄设备 相机传感器：相机传
阅读更多...
pdfmake生成pdf的使用

pdfmake生成pdf的使用

实际项目中有时会有根据填写的表单数据或者其他格式的数据，将数据自动填充到pdf文件中根据固定模板生成pdf文件的需求 文章目录 利用pdfmake生成pdf文件1.下载安装pdfmake第三方包2.封装生成pdf文件的共用配置3.生成pdf文件的文件模板内容4.调用方法生成pdf 利用pdfmake生成pdf文件 1.下载安装pdfmake第三方包 npm i pdfma
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2