<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>
<!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="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>
<!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', 150, align: 'left' }, { display: '部门标示', name: 'id', 100, type: 'int', align: 'left' }, { display: '部门描述', name: 'remark', 250, align: 'left' } ], '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>