ligeUI.Demos.Grid

2016-05-29 19:05:07  访问(1889) 赞(0) 踩(0)


相关下载：ligeUI.Demos.Grid.zip     

  • 示例链接

  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
    <script src="lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="lib/ligerUI/js/plugins/ligerGrid.js" type="text/javascript"></script>

    <script src="data.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function ()
        {
            var columns =
            [
                { display: '主键', name: 'id', type: 'int', mintWidth: 40, width: 100 },
                { display: '名字', name: 'name' },
                { display: '性别', name: 'sex' },
                { display: '生日', name: 'birthday', type: 'date' }
             ];
            $("#maingrid").ligerGrid({
                columns: columns,
                data: jsonObj
            });
        });
    </script>
</head>
<body>
<h3>默认Grid</h3>
    <div id="maingrid"></div>
</body>
</html>


  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
    <script src="lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="lib/ligerUI/js/plugins/ligerGrid.js" type="text/javascript"></script>

    <script src="data.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function ()
        {
            var columns = 
            [
                { display: '主键', name: 'id', type: 'int' },
                { display: '名字', name: 'name' },
                { display: '性别', name: 'sex'},
                { display: '生日', name: 'birthday', type: 'date' }
             ];
            $("#maingrid").ligerGrid({
                columns: columns,
                data: jsonObj, width: '100%'
            });
        });
    </script>
</head>
<body>
<h3>显示100%宽度的表格</h3>
    <div id="maingrid"></div>
</body>
</html>


  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
    <script src="lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="lib/ligerUI/js/plugins/ligerGrid.js" type="text/javascript"></script>

    <script src="data.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function ()
        {
            var columns = 
            [
                { display: '主键', name: 'id', type: 'int' },
                { display: '名字', name: 'name' },
                { display: '性别', name: 'sex'},
                { display: '生日', name: 'birthday', type: 'date' }
             ];
            $("#maingrid").ligerGrid({
                columns: columns,
                data: jsonObj, usePager:false
            });
        });
    </script>
</head>
<body>
<h3>不显示分页的表格</h3>
    <div id="maingrid"></div>
</body>
</html>


  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
    <script src="lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="lib/ligerUI/js/plugins/ligerGrid.js" type="text/javascript"></script>

    <script src="data.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function ()
        {
            var columns =
            [
                { display: '主键', name: 'id', type: 'int' },
                { display: '名字', name: 'name' },
                { display: '性别', name: 'sex' },
                { display: '生日', name: 'birthday', type: 'date' }
             ];
            $("#maingrid").ligerGrid({
                columns: columns,
                data: jsonObj,title:'我的标题',showTitle:true
            });
        });
    </script>
</head>
<body>
<h3>显示Title的Grid</h3>
    <div id="maingrid"></div>
</body>
</html>


  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
    <script src="lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="lib/ligerUI/js/plugins/ligerGrid.js" type="text/javascript"></script>

    <script src="data.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function ()
        {
            var columns = 
            [
                { display: '主键', name: 'id', type: 'int' },
                { display: '名字', name: 'name' },
                { display: '性别', name: 'sex'},
                { display: '生日', name: 'birthday', type: 'date' }
             ];
            $("#maingrid").ligerGrid({
                columns: columns,
                data: jsonObj, usePager:false,isScroll:false
            });
        });
    </script>
</head>
<body>
<h3>不显示分页、不显示滚动体的表格</h3>
    <div id="maingrid"></div>
</body>
</html>


  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
    <script src="lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="lib/ligerUI/js/plugins/ligerGrid.js" type="text/javascript"></script>

    <script src="data.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function ()
        {
            var columns = 
            [
                { display: '主键', name: 'id', type: 'int', mintWidth: 40, width: 100 },
                { display: '名字', name: 'name' },
                { display: '性别', name: 'sex'},
                { display: '生日', name: 'birthday', type: 'date' },
                { display: '得分', name: 'score', type: 'float', totalSummary: { type: 'sum,max,min,avg' }
                }
             ];
            $("#maingrid").ligerGrid({
                columns: columns,
                data: jsonObj, isScroll: false
            });
        });
    </script>
</head>
<body>
<h3>显示汇总信息的表格</h3>
    <div id="maingrid"></div>
</body>
</html>


  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
    <script src="lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="lib/ligerUI/js/plugins/ligerGrid.js" type="text/javascript"></script>

    <script src="data.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function ()
        {
            var columns =
            [
                { dispaly: '序号', width: 30, render: function (item, index)
                {
                    return (index + 1);
                }
                },
                { display: '主键', name: 'id', type: 'int', mintWidth: 40, width: 100 },
                { display: '名字', name: 'name' },
                { display: '性别', name: 'sex' },
                { display: '生日', name: 'birthday', type: 'date' },
                { dispaly: '操作', render: function (item, index)
                {
                    return '<a href=javascript:f_modify(' + item.id + ')>编辑</a>';
                }
                }
             ];
            $("#maingrid").ligerGrid({
                columns: columns,
                data: jsonObj
            });
        });
        function f_modify(id)
        {
            alert(id);
        }
    </script>
</head>
<body>
<h3>模板列</h3>
    <div id="maingrid"></div>
</body>
</html>

上一条：

下一条：


 

相关评论

评论加载中……
 

发表评论

类型：
内容：
  (Alt+Enter)
 
  ┈全部┈  
 
（显示默认分类）