<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. IDEA使用Git管理项目

    今天将项目使用Git管理了,IDEA. 第一步: 第二步:

  2. jquery获取服务器控件Label的值

    首先引入js文件:<script type="text/javascript" src="js/jquery-1.8.3.js"></scri ...

  3. 将日期转换为指定的格式:比如转换成 年月日时分秒 这种格式:yyyy-MM-dd hh:mm:ss 或者 yyyy-MM-dd。总结下。

    可以为Date原型添加如下的方法: Date.prototype.format = function(fmt) { var o = { "M+" : this.getMonth() ...

  4. UVa 11538 象棋中的皇后

    https://vjudge.net/problem/UVA-11538 题意: n×m的棋盘,有多少种方法放置两个相互攻击的皇后? 思路: 这两个皇后互相攻击的方式只有3种,在同一行,在同一列,或在 ...

  5. Python isspace()方法--转载

    描述 Python isspace() 方法检测字符串是否只由空格组成. 语法 isspace()方法语法: str.isspace() 参数 无. 返回值 如果字符串中只包含空格,则返回 True, ...

  6. QWebEngineView_CssVariables

    1.测试代码,参考网址:http://blog.sina.com.cn/s/blog_1508519340102wgq0.html 2.测试下来,结果: 2.1.Qt5.6开始,没有 WebKit了. ...

  7. 雷林鹏分享:Ruby XML, XSLT 和 XPath 教程

    Ruby XML, XSLT 和 XPath 教程 什么是 XML ? XML 指可扩展标记语言(eXtensible Markup Language). 可扩展标记语言,标准通用标记语言的子集,一种 ...

  8. Springfox与swagger的整合使用(十七)

    一.前言 让我们先理一下springfox与swagger的关系. swagger是一个流行的API开发框架,这个框架以“开放API声明”(OpenAPI Specification,OAS)为基础, ...

  9. 两个Fragment之间传递数据

    1.第一个Fragment BlankFragment blankFragment = new BlankFragment();Bundle bundle = new Bundle();bundle. ...

  10. websocket 缺点

    当时用 python 做的服务器,后来回去想再工作项目上用,但新的技术升级,随之而来还是要解决很多非技术问题, 服务器带宽,并发服务器性能方方面面考虑之后还是没有用上,十分可惜, 一个新的技术推动,尤 ...