[html][LigerUI]使用示例

  <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 范例

posted on 2016-04-03 21:47 z5337 阅读(246) 评论(0) 编辑收藏举报

[html][LigerUI]使用示例

搜索

常用链接

我的标签

积分与排名

随笔档案

阅读排行榜