igGrid如何客户端绑定JavaScript数组和jQuery数组

作者:控件中国网   出处:控件中国网   2015-08-17 11:09:27   阅读:6

igGrid是Infragistics公司出品的一款jQuery/HTML5表格控件,包含在Ignite UI界面套包里,在很多时候需要对表格进行客户端数据绑定,该

表格控件提供完整的方法可以帮助开发人员快速进行客户端数据绑定,该控件可以采用JavaScript或者jQuery绑定,具体如下:

1.在HTML页面里引用控件提供个相关JS文件
<script src="scripts/jquery.js" type="text/javascript"></script>
<script src="scripts/jquery-ui.js" type="text/javascript"></script>
<script src="scripts/infragistics.core.js" type="text/javascript"></script>
<script src="scripts/infragistics.lob.js" type="text/javascript"></script>
<link href="css/themes/infragistics/infragistics.theme.css" rel="stylesheet" type="text/css" />
<link href="css/structure/infragistics.css" rel="stylesheet" type="text/css" />
2.创建JavaScript数组或jQuery数组

JSON数组:
products = [];
products[0] = { "ProductID": 1, "Name": "Adjustable Race", "ProductNumber": "AR-5381" };
products[1] = { "ProductID": 2, "Name": "Bearing Ball", "ProductNumber": "BA-8327" };
products[2] = { "ProductID": 3, "Name": "BB Ball Bearing", >"ProductNumber": "BE-2349" };
products[3] = { "ProductID": 4, "Name": "Headset Ball Bearings", "ProductNumber": "BE-2908" };
products[4] = { "ProductID": 316, "Name": "Blade", "ProductNumber": "BL-2036" };
products[5] = { "ProductID": 317, "Name": "LL Crankarm", "ProductNumber": "CA-5965" };
products[6] = { "ProductID": 318, "Name": "ML Crankarm", "ProductNumber": "CA-6738" };
products[7] = { "ProductID": 319, "Name": "HL Crankarm", "ProductNumber": "CA-7457" };
products[8] = { "ProductID": 320, "Name": "Chainring Bolts", "ProductNumber": "CB-2903" };
products[8] = { "ProductID": 321, "Name": "Chainring Nut", "ProductNumber": "CN-6137" };

JavaScript数组:
arrayOfArraysData = [
    ["AED", "Emirati Dirham", "Jun  1 1998 12:00AM"],
    ["AFA", "Afghani", "Jun  1 1998 12:00AM"],
    ["ALL", "Lek", "Jun  1 1998 12:00AM"],
    ["AMD", "Armenian Dram", "Jun  1 1998 12:00AM"],
    ["ANG", "Netherlands Antillian Guilder", "Jun  1 1998 12:00AM"],
    ["AOA", "Kwanza", "Jun  1 1998 12:00AM"],
    ["ARS", "Argentine Peso", "Jun  1 1998 12:00AM"],
    ["ATS", "Shilling", "Jun  1 1998 12:00AM"],
    ["AUD", "Australian Dollar", "Jun  1 1998 12:00AM"],
    ["AWG", "Aruban Guilder", "Jun  1 1998 12:00AM"],
    ["AZM", "Azerbaijanian Manat", "Jun  1 1998 12:00AM"],
];

HTML表格:
<table id="t1" cellpadding="5" cellspacing="0" border="1">
    <thead>
        <tr>
            <th>
               Product ID
            </th>
            <th>
              Product Name
            </th>
            <th>
              Product Number 
            </th>
        </tr>
    </thead>
    <tbody>
        <tr><td>1</td><td>Adjustable Race</td><td>AR-5381</td></tr>
        <tr><td>2</td><td>Bearing Ball</td><td>BA-8327</td></tr>
        <tr><td>3</td><td>BB Ball Bearing</td><td>BE-2349</td></tr>
        <tr><td>4</td><td>Headset Ball Bearings</td><td>BE-2908</td></tr>
        <tr><td>316</td><td>Blade</td><td>BL-2036</td></tr>
        <tr><td>317</td><td>LL Crankarm</td><td>CA-5965</td></tr>
        <tr><td>318</td><td>ML Crankarm</td><td>CA-6738</td></tr>
        <tr><td>319</td><td>HL Crankarm</td><td>CA-7457</td></tr>
        <tr><td>320</td><td>Chainring Bolts</td><td>CB-2903</td></tr>
        <tr><td>321</td><td>Chainring Nut</td><td>CN-6137</td></tr>
    </tbody>
</table>
4.jQuery客户端表格初始化

JSON数组在HTML里:
<table id=”grid1”></table>
在Javascript里:
$(function () {
      $("#grid1").igGrid({
          columns: [
              { headerText: "Product ID", key: "ProductID", dataType: "number" },
              { headerText: "Product Name", key: "Name", dataType: "string" },
              { headerText: "Product Number", key: "ProductNumber", dataType: "string" },
          ],
          width: '500px',
          dataSource: products
      });
  });
JavaScript数组在HTML里:
<table id=”grid1”></table>
在JavaScript里:
$(function () {
    $("#grid1").igGrid({
       autoGenerateColumns: false,
        columns: [
            { headerText: "Employee ID", key: "ProductID", dataType: "string" },
            { headerText: "Name", key: "Name", dataType: "string" },
            { headerText: "Date", key: "ProductNumber", dataType: "string" },
        ],
        dataSource: arrayOfArraysData,

    });
});
HTML表格:
$("#grid1").igGrid({
   autoGenerateColumns: false,
    columns: [
        { key: 1, width: "100px", dataType: "number", headerText: "[Custom Header]" }
    ],
    defaultColumnWidth: 150   
});

Copyright© 2006-2015 ComponentCN.com all rights reserved.重庆磐岩科技有限公司(控件中国网) 版权所有 渝ICP备12000264号 法律顾问:元炳律师事务所
客服软件
live chat