<link href="Source/lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />

  <script src="jquery-1.12.2.min.js" type="text/javascript"></script>

  <script src="Source/lib/ligerUI/js/core/base.js" type="text/javascript"></script>

  <script src="Source/lib/ligerUI/js/plugins/ligerTextBox.js" type="text/javascript"></script>

上面这段代码用于准备构建 ligerTextBox 对象

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

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

    <script src="../../lib/ligerUI/js/core/base.js" type="text/javascript"></script>

    <script src="../../lib/ligerUI/js/plugins/ligerTree.js" type="text/javascript"></script>

上面这段代码用于准备构建 ligerTree 对象

可以看出来 区别只在于最后一个引用： ligerTextBox / ligerTree

<!doctype html>

<html>

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <link href="Source/lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />

  <script src="jquery-1.12.2.min.js" type="text/javascript"></script>

  <script src="Source/lib/ligerUI/js/core/base.js" type="text/javascript"></script>

  <script src="Source/lib/ligerUI/js/plugins/ligerTextBox.js" type="text/javascript"></script>

  <script type="text/javascript">

    $(function () {

      //我们将一个html文本框对象转换成ligerui文本框对象

      $("#txt1").ligerTextBox({

        //如果没有输入时,会提示不能为空

        nullText: '不能为空'

      });

    });

  </script>

</head>

<body style="padding:10px">

  <input type="text" id="txt1" />

  <br />

  <input type="text" value="测试文本框" />

</body>

</html>

ligerTextBox 范例

<!DOCTYPE html>

<html>

<head>

    <title>ligerTree 范例</title>

    <link href="Source/lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />

    <script src="jquery-1.12.2.min.js" type="text/javascript"></script>

    <script src="Source/lib/ligerUI/js/core/base.js" type="text/javascript"></script>

    <script src="Source/lib/ligerUI/js/plugins/ligerTree.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function ()

        {

            var data = [];

            data.push({ id: 1, pid: 0, text: '1' });

            data.push({ id: 2, pid: 1, text: '1.1' });

            data.push({ id: 4, pid: 2, text: '1.1.2' });

            data.push({ id: 5, pid: 2, text: '1.1.2' });      

            data.push({ id: 10, pid: 8, text: 'wefwfwfe' });

            data.push({ id: 11, pid: 8, text: 'wgegwgwg' });

            data.push({ id: 12, pid: 8, text: 'gwegwg' });

            data.push({ id: 6, pid: 2, text: '1.1.3', ischecked: true });

            data.push({ id: 7, pid: 2, text: '1.1.4' });

            data.push({ id: 8, pid: 7, text: '1.1.5' });

            data.push({ id: 9, pid: 7, text: '1.1.6' });

            $("#tree1").ligerTree({

            data:data,

            idFieldName :'id',

            parentIDFieldName :'pid'

            }

            );

        });

    </script>

</head>

<body style="padding:10px">

    <div style="width:200px; height:300px; margin:10px; float:left; border:1px solid #ccc; overflow:auto;  ">

    <ul id="tree1"></ul>

    </div> 

    <div style="display:none">

    <!--  数据统计代码 -->

    </div>

</body>

</html>

ligerTree 范例

<!doctype html>

<html>

<head>

  <meta charset="UTF-8">

  <title>ligerGrid 范例</title>

  <link href="Source/lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />

  <script src="jquery-1.12.2.min.js" type="text/javascript"></script>

  <script src="Source/lib/ligerUI/js/core/base.js" type="text/javascript"></script>

  <script src="Source/lib/ligerUI/js/plugins/ligerGrid.js" type="text/javascript"></script>  

  <script type="text/javascript">

      var manager;

      $(function ()

      {

          var beforeTime;

          manager = $("#maingrid").ligerGrid({

              columns: [

              { display: '部门名称', name: 'name', width: 150, align: 'left' },

              { display: '部门标示', name: 'id', width: 100, type: 'int', align: 'left' },

              { display: '部门描述', name: 'remark', width: 250, align: 'left' }

              ], width: '500px', pageSizeOptions: [5, 10, 15, 20], height: '100%',

              url: 'bigdata.aspx?Action=GetData',

              dataAction: 'server', //服务器排序

              usePager: false,      //服务器分页

              alternatingRow: false, //奇偶行效果

              tree: { columnName: 'name' },

              onBeforeShowData: function ()

              {

                  beforeTime = new Date().getTime();

              },

              onAfterShowdata: function ()

              {

                  var diffValue = new Date().getTime() - beforeTime;

                  diffValue = diffValue / 1000;

                  $("#message").html("渲染时间:" + diffValue + "秒");

              }

          }

          );

      });

      function getSelected()

      {

          var row = manager.getSelectedRow();

          if (!row) { alert('请选择行'); return; }

          alert(JSON.stringify(row));

      }

      function reload()

      {

          manager.reload(1);

      }

  </script>

</head>

<body style="padding:4px">

<div>

  <div id="message"></div>

  <div class="l-clear"></div>

</div>

<div id="centerContent">

  <div id="maingrid" style="overflow: auto"></div>

</div>

</body>

</html>

ligerGrid 范例

[html][LigerUI]使用示例的更多相关文章

  1. jQuery LigerUI 最新版压缩包（含chm帮助文档、源码、donet权限示例）

    jQuery LigerUI 最新版压缩包 http://download.csdn.net/download/heyin12345/4680593 jQuery LigerUI 最新版压缩包(含ch ...

  2. ligerui grid行编辑示例

    <%@ page contentType="text/html; charset=UTF-8" %> <% String path = request.getCo ...

  3. jQuery LigerUI系列：ligerComboBox

    1. ligerComboBox参数.方法及事件 1.1 参数 2. ligerComboBox示例 2.1 初始化HTML select控件 <link href="/Scripts ...

  4. C#结合Jquery LigerUI Tree插件构造树

    Jquery LigerUI Tree是Jquery LigerUI()的插件之一,使用它可以快速的构建树形菜单.呵呵 废话不说了,直入正题,下面介绍C#结合ligerui 构造树形菜单的两种方法 1 ...

  5. 关于ligerUi的ligertree的初始化默认选中指定项目的方法

    LigerUi中ligerTree官方示例代码片段: var parm = function (data) { return data.text.indexOf('节点1.3') == 0; }; t ...

  6. 利用ligerUI隐藏某列，并不产生空白列的方法

    var grid;//声明变量 $(function () { //grid初始化 grid = $("#maingrid4").ligerGrid({ columns: [ { ...

  7. 扩展Jquery方法创建LigerUI Grid

    ///** //*封装jquery get请求ajax //*author:叶明龙 //*time:2012-12-10 //*/ function getAjax(url, para, fn) { ...

  8. Swift3.0服务端开发(一) 完整示例概述及Perfect环境搭建与配置（服务端+iOS端）

    本篇博客算是一个开头,接下来会持续更新使用Swift3.0开发服务端相关的博客.当然,我们使用目前使用Swift开发服务端较为成熟的框架Perfect来实现.Perfect框架是加拿大一个创业团队开发 ...

  9. .NET跨平台之旅：将示例站点升级至 ASP.NET Core 1.1

    微软今天在 Connect(); // 2016 上发布了 .NET Core 1.1 ,ASP.NET Core 1.1 以及 Entity Framework Core 1.1.紧跟这次发布,我们 ...

随机推荐

  1. 【建项目】eclipse maven建立多模块工程

    在工作的时候,大多时候都是用Maven来管理项目,可是一般我们都知道怎么用maven管理工程,却不知道通过Maven自己来建立多模块工程.于是自己抽时间,在网上找些资料,做了起来. 建立简单的Mave ...

  2. 大数据时代，IT行业竟有如此多高薪职位！

    近年来云计算.大数据.BYOD.社交媒体.3D打印机.物联网……在互联网时代,各种新词层出不穷,令人应接不暇.这些新的技术.新兴应用和对应的IT发展趋势,使得IT人必须了解甚至掌握最新的IT技能. 另 ...

  3. vue双向数据绑定最最最最最简单直观的例子

    vue双向数据绑定最最最最最简单直观的例子 一.总结 一句话总结:双向绑定既不仅model可以影响view的数据,view也可以影响model的数据 view model 数据 1.vue双向数据绑定 ...

  4. Excel导入oracle库

    Excel导入oracle库   建表   /*==============================================================*/ /* DBMS nam ...

  5. HDU 1029 基础dp

    题目链接:Ignatius and the Princess IV 大意:就是在N个数里找出唯一一个至少出现过(N+1)/ 2 次的数. 1 <= N <= 999999. hash: / ...

  6. pycharm 教程（一）安装和首次使用

    PyCharm 是我用过的Python编辑器中,比较顺手的一个.而且可以跨平台,在 mac 和 windows 下面都可以用,这点比较好. 首先预览一下 PyCharm 在实际应用中的界面:(更改了P ...

  7. 开源FTP软件FileZilla使用介绍

    简介 FileZilla是一个优秀的开源FTP软件,分为客户端版本和服务器版本,具备所有的FTP软件功能,如果想自己搭建FTP服务器,FileZilla是一个好选择. 下载 FileZilla有一个中 ...

  8. 201621123006 《Java程序设计》第13周学习总结

    1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 2. 为你的系统增加网络功能(购物车.图书馆管理.斗地主等)-分组完成 为了让你的系统可以被多个用户通过网 ...

  9. LoadRunner设置监控Windows系统资源步骤

    一般在客户端通过LoadRunner对服务器进行压力测试,都需要实时监控服务器端的系统资源,本篇主要简单介绍一下如何设置在LoadRunner的Controller中配置监控Windows Resou ...

  10. 找到链表的倒数第k个节点 python

    题目:给定一个链表的头节点,输出链表倒数第k个节点的值 分析:最简单的思路就按顺序访问链表节点,得到链表的长度x之后,再次从头节点出发,访问到第x-k+1个节点时,就是链表倒数第k个节点,但是这样的方 ...