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的模式,但是因为 ...

随机推荐

让fetch也可以timeout
原生的HTML5 API fetch并不支持timeout属性,习惯了jQuery的ajax配置的同学,如果一时在fetch找不到配置timeout的地方,也许会很纠结.fetch 的配置 API 如 ...
洛谷P1330 封锁阳光大学
题目描述曹是一只爱刷街的老曹,暑假期间,他每天都欢快地在阳光大学的校园里刷街.河蟹看到欢快的曹,感到不爽.河蟹决定封锁阳光大学,不让曹刷街. 阳光大学的校园是一张由N个点构成的无向图,N个点之间由M ...
[UE4][Custom Animation Graph Node]Evaluate Pose by Curve
目的:根据曲线值获得当前动作帧.用于实现各种通过曲线同步的功能. 方法:继承FAnimNode_Base创建自定义动画节点.重写Evaluate部分.创建相应的AnimGraphNode.可参考前一篇 ...
NBUT 1535
题意:往一个塔里放数,取数,找第 k 个大的数刚开始用 stack 做的,不知道怎样找第 k 个数又想到用 vector ,以前用过注释有点多吧 ...... 代码如下: #include&l ...
Python成长笔记 - 基础篇（七）python面向对象
三大特性: 1.封装:在类中对数据赋值.内部调用对外部用户是透明的,这使类变成了一个胶囊或容器,里面包含着类的数据和方法 2.继承:一个类可以派生出子类,在父类中定义的属性.方法会自动被子类继承 ...
requirejs按需加载angularjs文件
之前分享了一篇用ocLazyLoad实现按需加载angular js文件的博客.本来当时想会使用一种方法就行了.可最近刚好有时间,在网上查找了一下requirejs实现angular js文件按需加载 ...
JavaScript 基础第三天
一.前言在前天的内容我们提到了有关于JS的一些语言结构,这些语言结构都是语法中最为基本的内容必须予以熟记并可以灵活掌握. 二.引入在今天内容中我们将讨论两个很重要的概念,数组与函数. 三.重点内容 ...
STL练习题
//hdu_2717 //map 一对多映射,基于关键字快速查找,不允许重复值 //queue 队列先进先出 #include<iostream> #include<cstdio& ...
bzoj 3714
题意:n<=2000的盒子,有一些里面有球,再给你所有c[i][j](1<=i<=j<=n),即告诉你[i,j]里面球的总数的奇偶性需要花费c[i][j],现在求知道所有的盒子 ...
工作当中实际运用（2）——js原生实现全选/反选
老规矩直接上代码代码中详细注释: function checkAll(){ var alls=document.getElementById('tab-stp').getElementsByTa ...

LigerUI学习使用

LigerUI有如下主要特点：

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

随机推荐

热门专题