LigerUI学习使用

LigerUI学习使用LigerUI有如下主要特点: 使用简单,轻量级 控件实用性强,功能覆盖面大,可以解决大部分企业信息应用的设计场景 快速开发,使用LigerUI可以比传统开发减少极大的代码量 易扩展,包括默认参数、表单/表格编辑器、多语言支持等等 支持Java、.NET、PHP等web服务端 支持 IE6+、Chr

LigerUI有如下主要特点:

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

 

1.引入js库

 1 <!doctype html>
 2 <%@ page contentType="text/html;charset=UTF-8" language="java"%>
 3 <%@ taglib prefix="b" uri="/bonc-tags"%>
 4 <%@ taglib prefix="s" uri="/struts-tags"%>
 5 <%
 6     String contextPath = request.getContextPath();
 7 %>
 8 <html>
 9 <head>
10     <link href="<%=contextPath%>/resources/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
14     <script src="<%=contextPath%>/resources/jquery/jquery-1.9.0.min.js" type="text/javascript"></script>
15     <script src="<%=contextPath%>/resources/ligerUI/js/core/base.js" type="text/javascript"></script>
16     <script src="<%=contextPath%>/resources/ligerUI/js/plugins/ligerGrid.js" type="text/javascript"></script>
17      <script src="<%=contextPath%>/resources/ligerUI/js/plugins/ligerResizable.js" type="text/javascript"></script>
18 </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.效果如下:

 初始化状态:LigerUI学习使用 

下钻后的数据:

LigerUI学习使用

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

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

 

今天的文章LigerUI学习使用分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/46531.html

(0)
编程小号编程小号
上一篇 2023-09-05 19:17
下一篇 2023-09-05 19:46

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注