项目总结——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格式的数据:

{
    "Total": 49,
    "Rows": [
        {
            "id": 2049,
            "bookingId":"702645678909876520141104",
            "companyId":"456789098765",
            "bookingDate":"2014-11-04",
            "bookingTime":"9:30",
            "bookingPlace":"海淀区医保中心预约大厅",
            "bookingThing":"医疗费用报销取号预约",
            "bookingType":"日后办理",
            "bookingState":"0",
            "companyName": "fdfdsf",
            "insuranceName":"基本医疗",
            "insuranceAmount":"7"
        },
        {
            "id": 2050,
            "bookingId":"648045678909876520141104",
            "companyId":"456789098765",
            "bookingDate":"2014-11-04",
            "bookingTime":"9:30",
            "bookingPlace":"海淀区医保中心预约大厅",
            "bookingThing":"医疗费用报销取号预约",
            "bookingType":"即时办理",
            "bookingState":"0",
            "companyName":"456789098765",
            "insuranceName":"离休人员",
            "insuranceAmount":"5"
        },
        {
            "id": 2050,
            "bookingId":"648045678909876520141104",
            "companyId":"456789098765",
            "bookingDate":"2014-11-04",
            "bookingTime":"9:30",
            "bookingPlace":"海淀区医保中心预约大厅",
            "bookingThing":"医疗费用报销取号预约",
            "bookingType":"即时办理",
            "bookingState":"0",
            "companyName":"456789098765",
            "insuranceName":"基本医疗",
            "insuranceAmount":"5"
        },
        {
            "id": 2051,
            "bookingId":"705245678909876520141103",
            "companyId":"456789098765",
            "bookingDate":"2014-11-03",
            "bookingTime":"9:15",
            "bookingPlace":"海淀区医保中心预约大厅",
            "bookingThing":"医疗费用报销取号预约",
            "bookingType":"即时办理",
            "bookingState":"0",
            "companyName":"456789098765",
            "insuranceName":"生育保险",
            "insuranceAmount":"7"
        },
        {
            "id": 2051,
            "bookingId":"705245678909876520141103",
            "companyId":"456789098765",
            "bookingDate":"2014-11-03",
            "bookingTime":"9:15",
            "bookingPlace":"海淀区医保中心预约大厅",
            "bookingThing":"医疗费用报销取号预约",
            "bookingType":"即时办理",
            "bookingState":"0",
            "companyName":"456789098765",
            "insuranceName":"基本医疗",
            "insuranceAmount":"5"
        },
        {
            "id": 2052,
            "bookingId":"219334567890987620141104",
            "companyId":"345678909876",
            "bookingDate":"2014-11-04",
            "bookingTime":"9:30",
            "bookingPlace":"海淀区医保中心预约大厅",
            "bookingThing":"医疗费用报销取号预约",
            "bookingType":"即时办理",
            "bookingState":"0",
            "companyName":"fd",
            "insuranceName":"基本医疗",
            "insuranceAmount":"6"
        },
        {
            "id": 2053,
            "bookingId":"183934567890987620141104",
            "companyId":"345678909876",
            "bookingDate":"2014-11-04",
            "bookingTime":"9:30",
            "bookingPlace":"海淀区医保中心预约大厅",
            "bookingThing":"医疗费用报销取号预约",
            "bookingType":"日后办理",
            "bookingState":"0",
            "companyName":"345678909876",
            "insuranceName":"基本医疗",
            "insuranceAmount":"6"
        },
        {
            "id": 2063,
            "bookingId":"877843212323232320141103",
            "companyId":"432123232323",
            "bookingDate":"2014-11-03",
            "bookingTime":"9:15",
            "bookingPlace":"海淀区医保中心预约大厅",
            "bookingThing":"医疗费用报销取号预约",
            "bookingType":"即时办理",
            "bookingState":"0",
            "companyName":"发热",
            "insuranceName":"基本医疗",
            "insuranceAmount":"7"
        },
        {
            "id": 2065,
            "bookingId":"756934567890987620141103",
            "companyId":"345678909876",
            "bookingDate":"2014-11-03",
            "bookingTime":"9:15",
            "bookingPlace":"海淀区医保中心预约大厅",
            "bookingThing":"医疗费用报销取号预约",
            "bookingType":"即时办理",
            "bookingState":"0",
            "companyName":"沟通",
            "insuranceName":"基本医疗",
            "insuranceAmount":"7"
        },
        {
            "id": 2066,
            "bookingId":"137523456543212320141104",
            "companyId":"234565432123",
            "bookingDate":"2014-11-04",
            "bookingTime":"9:30",
            "bookingPlace":"海淀区医保中心预约大厅",
            "bookingThing":"医疗费用报销取号预约",
            "bookingType":"日后办理",
            "bookingState":"0",
            "companyName":"发呆",
            "insuranceName":"基本医疗",
            "insuranceAmount":"5"
        }
    ]
}

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

表格加载数据

        $(function ()
        {
			//加载表格
			showInfo();
        });
		//showInfo往后台action提交请求,同时获取后台数据
        function showInfo(keyWord){
			var url = 'statisticalQuery_list.action';
			if(keyWord){
				keyWord = encodeURI(encodeURI(keyWord));
				url = url + '?keyWord='+keyWord;
			}
			$("#maingrid").ligerGrid({
		                columns: [
		                {
							display : '主键',
							name : 'id',
							align : 'left',
							hide: 'true',
							width : 120
						},{
							display : "预约号",
							name : 'bookingId',
							width : 180,
							type : "text",
							align : "left"
						}, {
							display : "企业名称",
							name : "companyName",
							width : 180,
							type : "text",
							align : "left"
						}, {
							display : "社保号",
							name : "companyId",
							width : 180,
							type : "text",
							align : "left"
						}, {
							display : "保险类型",
							name : "insuranceName",
							width : 100,
							type : "date",
							align : "left"
						}, {
							display : "单据份数",
							name : "insuranceAmount",
							width : 100,
							type : "date",
							align : "left"
						},  {
							display : "预约日期",
							name : "bookingDate",
							width : 180,
							type : "date",
							align : "left"
						},{
							display : "预约时间",
							name : "bookingTime",
							width : 180,
							type : "date",
							align : "left"
						}
		                ],
		                dataAction: 'server',
		                //data: data,
		                url:url,
		                sortName: 'id',
		                width: '98%',
		                height: '95%',
		                pageSize: 10,
		                rownumbers:true,
		                checkbox : false,
		                heightDiff: -6,
		                onAfterShowData  : show,
							//单机表格,跳转统计页面,
		                onSelectRow : function (urlAll, rowindex, rowobj)
		                {
							//onClickCell    (rowIndex, field, value)
					  		//获取变量
					  		var startDateStr=document.getElementById("startDate").value;
					  		var endDateStr=document.getElementById("endDate").value;
					  		var companyIdStr=urlAll.companyId;
					  		var companyNameStr= urlAll.companyName; 

	                   		var urlAll="statisticalQuery_toDetail.action?startDateStr="+startDateStr+ "&endDateStr=" + endDateStr+ "&companyIdStr=" + companyIdStr+ "&companyNameStr=" + companyNameStr;
	                   		top.f_addTab(null, '预约统计详细信息', urlAll);
	               		}
		            });
		}

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

最后

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

时间: 11-23

项目总结——Jquery LigerUI-表格的使用的相关文章

jQuery删除表格指定行代码实例

jQuery删除表格指定行代码实例:本章节介绍一下如何删除表格中指定的行,代码非常的简单,直接上代码: $("table tr").eq(2).remove(); 相关阅读:1.eq()函数可以参阅jQuery的eq()方法一章节.2remove()函数可以参阅jQuery的remove()方法一章节. 原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=13213 更多内容可以参阅:http://www.soft

jQuery实现表格隔行换色且感应鼠标高亮行变色

jQuery插件实现表格隔行换色且感应鼠标高亮行变色 http://www.jb51.net/article/41568.htm jquery 操作DOM的基本用法分享http://www.jb51.net/article/30047.htm jQuery技术之事件处理 http://blog.csdn.net/woshisap/article/details/7434010 jQuery实现表格隔行换色且感应鼠标高亮行变色,布布扣,bubuko.com

JQuery实现表格的增加行和删除行

利用JQuery实现datatables插件的增加和删除行操作 在学习过程中遇到了这个利用JQuery对表格行的增加和删除,特记录下来以供初学者参考. 下面是主要的代码: <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>zengjia he shancu </title> <meta charset="utf-8

jquery开发表格插件项目之知识点累积 二

$.addClass() 增加样式 $.removeClass() 去除样式 $.toggleClass() 单击增加样式,再单击取消样式 $.hasClass() 判断是否存在样式,存在返回true $.data("name","yihen"); -----$.data("name") = yihen;  (jQuery.data() 方法,向元素附加数据,然后取回数据) 数组操作方法 arr.push() 将数据添加到数组尾部 arr.uns

jquery开发表格插件项目之知识点累积

js设置节点的属性与属性值用setAttribute(),获取节点的属性和属性值用getAttribute(). jquery 中使用attr 就可以获取及设置元素属性. 在设置checkbox状态时,使用attr出现undefined的情况,改用prop解决该问题. 对于HTML元素本身存在的固有属性,在处理时,用prop方法: 对于HTML元素自定义的DOM属性,在处理时,用attr方法. closest():从本身元素开始往上查找,返回最近的匹配的祖先元素,向上查找,找到一个匹配的就停止查

Jquery实现表格中的查看删除修改

首先我们在学习js的时候就有接触到表格中的一些操作,那么Jquery是一个兼容多浏览器的轻量级的javascript库,它的核心理念是写的更少,做的更多. 现在就用学到的Jquery来做一个表格中的查看删除修改感受一下Jquery的强大. 第一步:我们编写html页 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

项目总结—jQuery EasyUI-DataGrid动态加载表头

http://blog.csdn.net/zwk626542417/article/details/19248747 概要 在前面两篇文章中,我们已经介绍了在jQuery EasyUI-DataGrid中有参数和无参数的情况下将数据库中数据显示到前台,但是对于前面两篇文章显示的数据表头是固定的,如果我们显示到前台的数据来自数据库不同的表,那么表头也需要动态的加载,这篇文章我们就来看下在EasyUI-DataGrid中动态加载表头和数据. 实现 我们要实现的功能是根据我们的需要,让DataGrid

jQuery HighchartsTableHTML表格转Highcharts图表插件

版权申明jQuery HighchartsTable 由 PMSIpilot 创建,中文使用文档由Highcharts中文网发布本文由Theo.红烧鸡翅膀.Mr.Zhang 翻译整理,版权归Highcharts中文网所有,除非得到允许,不允许以任何形式转载! 一.关于(About) 1.简介 HighchartsTable是一款基于jQuery编写的HTML表格转换Highcharts图表的插件.利用它,你只需要关注HTML表格配置即可创建Highcharts图表! 2.运行原理 Highcha

jquery在表格中的全选、不选,下面全选,全选勾选中,下面一项没有选,全选勾未选中,并且带出请求值。

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../js/jquery.min.js" ></script> <style> body{ font-family: "微