limeng
/
cetdz


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
							<!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" />
    <link href="../../../lib/ligerUI/skins/Silvery/css/style.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/core/base.js" type="text/javascript"></script> 
    <script src="../../../lib/ligerUI/js/plugins/ligerGrid.js" type="text/javascript"></script>
        <script src="../../../lib/ligerUI/js/plugins/ligerResizable.js" type="text/javascript"></script>
        <script src="../../../lib/ligerUI/js/plugins/ligerCheckBox.js" type="text/javascript"></script>
    <script src="../CustomersData.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#maingrid").ligerGrid({
                columns: [
                { display: '顾客', name: 'CustomerID', align: 'left', width: 100, minWidth: 60 },
                { display: '公司名', name: 'CompanyName', minWidth: 120 },
                { display: '联系名', name: 'ContactName', minWidth: 140 },
                { display: '城市', name: 'City' }
                ], data:CustomersData, sortName: 'CustomerID',height:300,pageSize:30 
            });

            $("#maingrid1").ligerGrid({
                columns: [
                { display: '主键', name: 'CustomerID', align: 'left', width: 154, minWidth: 60 },
                { display: '公司名', name: 'CompanyName', minWidth: 154 },
                { display: '联系名', name: 'ContactName', minWidth: 140 },
                { display: '城市', name: 'City' }
                ], data:CustomersData,  sortName: 'CustomerID', 
                width: '100%'
            });

            $("#maingrid2").ligerGrid({
                columns: [
                { display: '主键', name: 'CustomerID', align: 'left', width: 144, minWidth: 60 },
                { display: '公司名', name: 'CompanyName', minWidth: 124 },
                { display: '联系名', name: 'ContactName', minWidth: 144 },
                { display: '城市', name: 'City' }
                ], data:CustomersData, sortName: 'CustomerID', 
                width: 680
            });


            $("#maingrid3").ligerGrid({
                columns: [
                { display: '主键', name: 'CustomerID', align: 'left', width: 141, minWidth: 60 },
                { display: '公司名', name: 'CompanyName',minWidth:121 },
                { display: '联系名', name: 'ContactName', minWidth: 140 }, { display: '联系名', name: 'ContactName', minWidth: 140 }, { display: '联系名', name: 'ContactName', minWidth: 140 }, { display: '联系名', name: 'ContactName', minWidth: 140 }, { display: '联系名', name: 'ContactName', minWidth: 140 }, { display: '联系名', name: 'ContactName', minWidth: 140 }, { display: '联系名', name: 'ContactName', minWidth: 140 },
                 { display: '城市', name: 'City' }
                ], data: CustomersData, sortName: 'CustomerID', 
                width: '100%'
            });

            $("#maingrid4").ligerGrid({
                columns: [
                { display: '主键', name: 'CustomerID', align: 'left', width: 140, minWidth: 60 },
                { display: '公司名', name: 'CompanyName', minWidth: 120 },
                { display: '联系名', name: 'ContactName', minWidth: 140 }, { display: '联系名', name: 'ContactName', minWidth: 140 }, { display: '联系名', name: 'ContactName', minWidth: 140 }, { display: '联系名', name: 'ContactName', minWidth: 140 }, { display: '联系名', name: 'ContactName', minWidth: 140 },
                { display: '城市', name: 'City' }
                ], data:CustomersData,  sortName: 'CustomerID', 
                width: 680
            });

            $("#maingrid5").ligerGrid({
                columns: [
                { display: '主键', name: 'CustomerID', align: 'left', width: 140, minWidth: 33 },
                { display: '公司名', name: 'CompanyName', minWidth: 120 },
                { display: '联系名', name: 'ContactName', minWidth: 140 },
                { display: '城市', name: 'City' }
                ], data:CustomersData,isScroll:false,  sortName: 'CustomerID', 
                width: 680
            });

            $("#pageloading").hide(); 
        });
    </script>
</head>
<body style="overflow-x:hidden">
<div class="l-loading" style="display:block" id="pageloading"></div>
<h3>示例一：限定高度</h3>
    <div id="maingrid"></div>
    <br />
<h3>示例二：使用100%宽度</h3>
    <div id="maingrid1"></div>
    <br />
<h3>示例三：使用固定宽度680px</h3>
    <div id="maingrid2"></div>
    <br />
<h3>示例四：表格太宽时显示横向滚动体(主体为100%宽度)</h3>
    <div id="maingrid3"></div>
    <br />
<h3>示例五：表格太宽时显示横向滚动体(主体为680px宽度)</h3>
    <div id="maingrid4"></div>
    <br />
    <h3>示例六：表格太高时不显示纵向滚动体,而是自动扩展宽度,可以通过改变每页显示记录数改变高度(默认显示)</h3>
    <div id="maingrid5"></div>
    <br />
  <div style="display:none;">
  
</div>
 
</body>
</html>