如何对Syncfusion Essential JS中Grid进行数据绑定

作者:控件中国网   出处:控件中国网   2015-08-20 11:15:08   阅读:6

Essential Studio for JavaScript是包含了超过80+ JavaScript的界面控件套包产品,常用的表格、图表、条码、按钮、复选框、列表框、甘特图、联机分析处理表格、菜单、工具栏等,在这篇文章中主要介绍该控件里常用的表格控件如何进行数据绑定,该Grid控件支持3种数据源:本地数据、服务器上数据以及HTML表格,下面就这三种类型如何进行绑定作介绍:

data-binding_img7.png

1.绑定本地数据
<div id="Grid"></div>
<script type="text/javascript">
  $(function () {// Document is ready.
      // Data for grid.
      window.gridData = [
        { firstName: "John", lastName: "Beckett", email: "john@Syncfusion.com" },
        { firstName: "Ben", lastName: "Beckett", email: "ben@Syncfusion.com" },
        { firstName: "Andrew", lastName: "Beckett", email: "andrew@Syncfusion.com" }
      ];
      $("#Grid").ejGrid({
          dataSource:window.gridData,
          columns: [
                   { field: "firstName",headerText:"First Name" },
                   { field: "lastName", headerText: "Last Name" },
                   { field: "email", headerText: "Email" }
          ]
      });
  });
 
</script>
2.绑定远程数据
<div id="Grid"></div>
<script type="text/javascript">
  $(function () {// Document is ready.
      //oData Adaptor with DataManager
      var dataManager = ej.DataManager("http://mvc.Syncfusion.com/Services/Northwnd.svc/Products");
 
      $("#Grid").ejGrid({
          dataSource: dataManager,
          columns: ["ProductID", "ProductName", "SupplierID", "UnitPrice"]
      });
  });
</script>
3.在绑定数据时可以设置一次性加载完数据或者是按需加载

1):一次性加载数据
<div id="Grid"></div>
<script type="text/javascript">
  $(function () {// Document is ready.
      //oData Adaptor with DataManager
      var dataManager = ej.DataManager({
          url: "http://mvc.Syncfusion.com/Services/Northwnd.svc/Products",
          offline: true
      });
 
      $("#Grid").ejGrid({
          dataSource: dataManager,
          allowPaging: true,
          columns: ["ProductID", "ProductName", "SupplierID", "UnitPrice"]
      });
  });
 
</script>
2):按需加载数据
<div id="Grid"></div>
<script type="text/javascript">
  $(function () {// Document is ready.
      //oData Adaptor with DataManager
      var dataManager = ej.DataManager("http://mvc.Syncfusion.com/Services/Northwnd.svc/Products");
 
      $("#Grid").ejGrid({
          dataSource: dataManager,
          allowPaging: true,
          columns: ["ProductID", "ProductName", "SupplierID", "UnitPrice"]
      });
  });
</script>
4.绑定HTML表格
<script type="text/javascript">
  $(function () {// Document is ready.
      $("#Grid").ejGrid({
        dataSource: ej.DataManager($("#Table1")), // binds table to grid
          columns: [
                   { field: "Laptop", headerText: "Laptop Brands"},
                   { field: "Model", headerText: "Model" },
                   { field: "Price", headerText: "Price", width: 90, textAlign: ej.TextAlign.Right, format: " ${0:c}" },
                   { field: "OS", headerText: "Operating System" },
                   { field: "RAM", headerText: "RAM", width: 120, textAlign: ej.TextAlign.Right },
                   { field: "ScreenSize", headerText: "Screen Size", textAlign: ej.TextAlign.Right, width: 100, format:

"{0:N1} inch" }
          ]
      });
  });
</script>

<div id="Grid"></div>
<table id="Table1">
  <thead>
    <tr>
      <th>
        Laptop
      </th>
      <th>
        Model
      </th>
      <th>
        Price
      </th>
      <th>
        OS
      </th>
      <th>
        RAM
      </th>
      <th>
        ScreenSize
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Dell Vostro</td>
      <td>2520</td>
      <td>39990</td>
      <td>Windows 8</td>
      <td>4GB</td>
      <td>15.6</td>
    </tr>
    <tr>
      <td>HP Pavilion Sleekbook</td>
      <td>14-B104AU</td>
      <td>22800</td>
      <td>Windows 8</td>
      <td>2GB</td>
      <td>14</td>
    </tr>
    <tr>
      <td>Sony Vaio</td>
      <td>E14A15</td>
      <td>42500</td>
      <td>Windows 7 Home Premium</td>
      <td>4GB DDR3 RAM</td>
      <td>14</td>
    </tr>
    <tr>
      <td>Lenovo</td>
      <td>Yoga 13</td>
      <td>57000</td>
      <td>Windows 8 RT</td>
      <td>2GB DDR3 RAM</td>
      <td>11.6</td>
    </tr>
    <tr>
      <td>Toshiba</td>
      <td>L850-Y3110</td>
      <td>57700</td>
      <td>Windows 8 SL</td>
      <td>8GB DDR3 RAM</td>
      <td>15.6</td>
    </tr>
  </tbody>
</table>

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