LigerUI学习使用

LigerUI有如下主要特点：

使用简单，轻量级
控件实用性强，功能覆盖面大，可以解决大部分企业信息应用的设计场景
快速开发，使用LigerUI可以比传统开发减少极大的代码量
易扩展，包括默认参数、表单/表格编辑器、多语言支持等等
支持Java、.NET、PHP等web服务端
支持 IE6+、Chrome、FireFox等浏览器
开源，源码框架层次简单易懂。

1.引入js库

 <!doctype html>

 <%@ page contentType="text/html;charset=UTF-8" language="java"%>

 <%@ taglib prefix="b" uri="/bonc-tags"%>

 <%@ taglib prefix="s" uri="/struts-tags"%>

 <%

     String contextPath = request.getContextPath();

 %>

 <html>

 <head>

     <link href="<%=contextPath%>/resources/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />

     <script src="<%=contextPath%>/resources/jquery/jquery-1.9.0.min.js" type="text/javascript"></script>

     <script src="<%=contextPath%>/resources/ligerUI/js/core/base.js" type="text/javascript"></script>

     <script src="<%=contextPath%>/resources/ligerUI/js/plugins/ligerGrid.js" type="text/javascript"></script>

      <script src="<%=contextPath%>/resources/ligerUI/js/plugins/ligerResizable.js" type="text/javascript"></script>

 </head>

2.引入div放置对应的数据

<div id="vt"></div>

3.ligerUI代码如下：

var parameter;

$(function(){

    var date=new Date().getMonth();

    date=date+1;

    date='1-'+date;

    //alert(date);

    var year=new Date().getFullYear();

    parameter=$("#vt").ligerGrid({

        columns:[

           {display:'部门',name:'DEPT_NAME',id:'id1',width:250,align:'left',frozen: true},

           {display:date+'月累计销售额',

               columns:[

                   {display:'累计完成',name:'HT_MONEY',width:220,align:'right',

                       render: function (record, rowindex, value, column) {

                             var html = '<a href="#" style="text-decoration:underline;color:green;" onclick="method1();">'+value+'</a>';

                             if(record["DEPT_NAME"]!='合计'){

                                  html = value;

                             }

                             return html;

                           }

                   },

                   {display:'应付第三方采购',name:'CG_MONEY',width:220,align:'right',

                       render: function (record, rowindex, value, column) {

                             var html = '<a href="#" style="text-decoration:underline;color:green;" onclick="method2();">'+value+'</a>';

                             if(record["DEPT_NAME"]!='合计'){

                                  html = value;

                             }

                             return html;

                           }

                   }

               ]

           },

           {display:date+'月累计净销售额',

               columns:[

                  {display:year+'年度目标',name:'HT_MONEY_J_TAR',width:220,align:'right'},

                  {display:'累计完成',name:'HT_MONEY_J',width:220,align:'right',

                      render: function (record, rowindex, value, column) {

                            var html = '<a href="#" style="text-decoration:underline;color:green;" onclick="method3();">'+value+'</a>';

                            if(record["DEPT_NAME"]!='合计'){

                                 html = value;

                            }

                            return html;

                          }

                  },

                  {display:'占目标(%)',name:'PRO',width:220,align:'right'}

               ]

           }

         ],width:'99.80%',

         height:'70%',

         usePager:false,alternatingRow: false,

            tree: { columnId:'id1',columnName: 'DEPT_NAME',

                isExtend:function(data){

                    if ('isextend' in data ){

                        if(data['isextend'] == true){

                            return true;

                        }

                    }

                    return false;

                },isParent:function(data){

                    if("1"==data['IS_LEAF']){

                        return false;

                    }else{

                        return true;

                    }

                }

            },

            onTreeCollapse:function(data){

                data['isextend'] = false;

            },

            url: "NetReturn!getlistformliger.action",

            parms:{selectmonth:document.getElementById("statemonth").value},

            onTreeExpand: function (data,e){

                data['isextend'] = true;

                 var grid = this;

                if (data.children==0 && !data.loaded) {

                    var o2=$("#acctmonth").val();

                    var o3=$("#statemonth").val();

                    var objsend= {"nodeid":data["DEPT_ID"],"acctmonth":o2,"selectmonth":o3};

                    $.post('NetReturn!getNextlist1.action',objsend,

                            function(xlist){

                                 var myobj=eval(xlist);

                                 grid.appendRange(myobj,data,null,false);

                            }

                    );

                 }

            }

    });

});

说明:1.具有树形结构的数据，可以下钻数据。

2.有链接，可以点击显示动态图(eCharts绘制)

3.数据可以进行排序

4.效果如下：

初始化状态:

下钻后的数据:

5.总结，ligerUI功能强大，可以大大较少开发时间

学习：http://www.cnblogs.com/tancp/p/3730318.html

LigerUI学习使用的更多相关文章

Jquery LigerUI框架学习（一）
ligerUI框架是一个很丰富的后台框架模板,具有简洁大方的后台样式框架,还有很多灵活的控件,方便开发人员使用: 把昨天学习的成功拿出来供大家学习学习: 首先我们要去ligerUI官网下载Jquery ...
Jquery LigerUI框架学习（二）之Tree于Tab标签实现iframe功能
LigerUI框架Tree于Tab标签动态使用,当点击Tree后动态创建Tab标签,和通常用的iframe框架功能类似 Tree中的关键代码 //Tree初始化 $("#tree1" ...
JQGrid 学习1
这几天一直在学习基于MVC的JQGrid. 记得刚毕业时候做web最头疼的就是GridView,各种分页查询删除,后来学习了Ajax,使用的jqury UI框架ligerui给公司做ERP系统,再后来 ...
从Prototype学习JavaScript面向对象编程
概述 JavaScript是一种基于对象的编程语言.它是灵活的,既有面向过程(也就是面向函数)的编程,也有面向对象的编程.因此我称它是基于对象的编程语言. 对于JavaScript的面向过程的编程特性 ...
Microsoft 2013 新技术学习笔记一
有几年没有关注技术了,最近有点时间想把技术重新捡起来,借着重构手上的一个后台管理框架的机会将微软新的几种技术全部应用一下,从目的上来讲并没有希望能对涉及的技术有很深入的了解,所以这个系列的文章(篇幅不 ...
(转)ligerUI 使用教程之Tip介绍与使用
概述: ligertip是ligerUI系列插件中的tooltip类插件,作用是弹一个浮动层,起提示作用阅读本文要求具备jQuery的基本知识,不然文中的javascript代码不易理解截 ...
（转）ligerUI 使用教程之Tip介绍与使用
概述: ligertip是ligerUI系列插件中的tooltip类插件,作用是弹一个浮动层,起提示作用阅读本文要求具备jQuery的基本知识,不然文中的javascript代码不易理解截 ...
前台框架的选择 EasyUI、DWZ、ligerui
EasyUI1.3.1+MVC4.0+EF5.0 番外篇关于前台框架的选择 EasyUI.DWZ.ligerui 昨天发了EasyUI1.3.1+MVC4.0+EF5.0实战之一开篇及布局控件介绍 ...
LigerUI+MVC的应用1
[项目开发]LigerUI+MVC的应用(一) 近期因为稍微空闲有点时间,就晚上回家自己在随便写写代码,也就边写边记,中间主要采用了微软的MVC4.0框架.虽然目前公司也是使用的MVC的模式,但是因为 ...

随机推荐

CabArc to create or extract a cab file
CabArc n D:\test.cab D:\output\*.* CabArc x D:\test.cab -r -p D:\output\*.*
Swift语法简介（一）
或许网络上有很多成型的介绍,我只想写下来留给自己.欢迎批评.开撸! 1.第一个程序,Hello,world!古人云,学会了Hello,world!这门语言你就掌握了一半了. print("H ...
Windows Phone 8.1 新特性 - 页面导航
本篇介绍一下Windows Phone 8.1 中页面导航的实现方式. 大家对Windows Phone 8 中页面导航的实现一定不陌生,我们使用 NavigationService 来实现.具体写法 ...
黑马程序员－autorelease pool
Autorelease:可以延迟给对象发送release消息.发送一个autorelease消息给对象,证明该对象在一定时间内有效,一定时间后会对该对象进行释放,进行一次release. 一个auto ...
ubuntu下面mysql，通过载入txt文件初始化数据表
环境:ubuntu12.04 mysql(通过apt安装) (1)根据数据表中的属性列,对应在txt中构造记录(一行对应一条记录),不同属性之间通过tab键(以/root目录下构建的init.tx ...
【转载】CentOS6.5_X64下安装配置MongoDB数据库
[转载]CentOS6.5_X64下安装配置MongoDB数据库 2014-05-16 10:07:09| 分类: 默认分类|举报|字号订阅下载LOFTER客户端本文转载自zhm&l ...
Error
错误解决的方案: armv7错误: 或者: 友情提示:为了避免不必要的错误,私有的还是放在.m 中引用.h c does not support default arguments: 还没解决方案,待 ...
iOS图片加载框架－SDWebImage解读
在iOS的图片加载框架中,SDWebImage可谓是占据大半壁江山.它支持从网络中下载且缓存图片,并设置图片到对应的UIImageView控件或者UIButton控件.在项目中使用SDWebImage ...
Android 客户端设计之环境考虑
我做过两三个android客户端应用的整体设计和部分的编码,这里仅仅谈一下设计方面的故事(此乃原创2015:11:02). 做客户端设计,首先要考虑应用所在的环境,包括三方面:1 要设计的apk是在一 ...
使用Roboguice依赖注入规划Android项目
前言好久没写博客了,罪过啊-记事本里累积了不少东西,整理整理放上来. 关于依赖注入 Dependency Injection( 依赖注入)可以很好的帮助我们分离模块,降低耦合.提高可测试性.(PS: ...

LigerUI学习使用

LigerUI有如下主要特点：

LigerUI学习使用的更多相关文章

随机推荐

热门专题