JS Grid插件使用

梦里梦外; 2022-06-13 09:42 214阅读 0赞

##### 1. 传送门：[js-grid官网][js-grid] #####

##### 2. 引入css： #####

##### 3. 引入Js： #####

##### 4.配置 #####

##### 5. 完整代码如下：  jquery-3.1.1.min.js  可去自行下载，其他jQuery.min.js也行    #####

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>demo</title>
      <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
      <link type="text/css" rel="stylesheet" href="css/jsgrid.min.css" />
      <link type="text/css" rel="stylesheet" href="css/jsgrid-theme.min.css" />
      <script type="text/javascript" src="js/jsgrid.min.js"></script>
    </head>
    <body>
      <table id="jsGrid"></table>
      <div id="list2"></div>
      <script>
          var clients = [
              { "Name": "Otto Clay", "Age": 25, "Country": 1, "Address": "Ap #897-1459 Quam Avenue", "Married": false },
              { "Name": "Connor Johnston", "Age": 45, "Country": 2, "Address": "Ap #370-4647 Dis Av.", "Married": true },
              { "Name": "Lacey Hess", "Age": 29, "Country": 3, "Address": "Ap #365-8835 Integer St.", "Married": false },
              { "Name": "Timothy Henson", "Age": 56, "Country": 1, "Address": "911-5143 Luctus Ave", "Married": true },
              { "Name": "Ramona Benton", "Age": 32, "Country": 3, "Address": "Ap #614-689 Vehicula Street", "Married": false }
          ];
    
          var countries = [
              { Name: "", Id: 0 },
              { Name: "United States", Id: 1 },
              { Name: "Canada", Id: 2 },
              { Name: "United Kingdom", Id: 3 },
              { Name: "China", Id: 4 }
          ];
    
          $("#jsGrid").jsGrid({
              width: "100%",
              height: "400px",
              inserting: true,
              editing: true,
              sorting: true,
              paging: true,
              data: clients,
              fields: [
                  { name: "Name", type: "text", width: 150, validate: "required" },
                  { name: "Age", type: "number", width: 50 },
                  { name: "Address", type: "text", width: 200 },
                  { name: "Country", type: "select", items: countries, valueField: "Id", textField: "Name" },
                  { name: "Married", type: "checkbox", title: "Is Married", sorting: false },
                  { type: "control" }
              ]
          });
      </script>
    </body>
    </html>

##### 6. 扩展1 关于Controller #####

如果都返回[jQuery][] promise，表格将支持异步通知状态，例如删除，会在删除ajax回调成功时做出反应。var promise = $.ajax(\{\}); 那么promise会有done方法，done方法在ajax请求完成时得到执行。所谓promise()作为一个对象的活动集合，ajax将直接返回promise的对象，其它支持的类型可以调用诸如$(“div”).promise()的方法。

> loadData 查

loadData: function(filter){
          return $.ajax({
              type: "get",
              url: "items",
              data: filter
          });
      }

pageLoading为true时，filter有pageSize和pageIndex两个参数，sorting为true时，filter有sortFiled和sortOrder两个参数，return一个表格加载的data或者当分页启动时，return如下形式：

{
        data
        itemsCount
      }

> insertItem 增

insertItem: function(item){
          return $.ajax({
              type: "post",
              url: "items",
              data: item
          });
      }

> updateItem 改

updateItem: function(item){
          return $.ajax({
              type: "put",
              url: "items",
              data: item
          });
      }

返回已更改的item用于更新表数据，否则以提交更改的item作为更新。

> deleteItem 删

deleteItem: function(item){
          return $.ajax({
              type: "delete",
              url: "items",
              data: item
          });
      }

##### 7. 扩展2 关于type #####

> text，filed支持多余的以下字段：

readOnly: false, //是否只读，true时，即使编辑也将不可更改。
      autosearch: true, //原意应该是搜索时按回车自动定位，但测试貌似没有生效，未知。

> number：

sorter: "number", //使用number分类
      align: "right", //居右
      readOnly: false

> select：

{
          align: "center",
          autosearch: true,
          items: [], //用于生成器的数组
          valueField: "", //items中映射data字段的值的字段，参照开头例子
          textFiled: "", //data中将被items替换显示的字段
         seletedIndex: -1, //默认选择的index
         valueType: "number|string", 数据类型
         readOnly: false
      }

> checkbox：

{
          sorter:"number",
          align:"center",
          autosearch: true
      }

> control 非表单字段，该列显示各种控制按钮：

{
          editButton: true,
          deleteButton: true,
          clearFilterButton: true,
          modeSwitchButton: true,
    
          align: "center",
          width: 50,
          filtering: false,
          inserting: false,
          editing: false,
          sorting: false,
    
          searchModeButtonTooltip: "Switch to searching", //搜索按钮悬停提示
          insertModeButtonTooltip: "Switch to insertin",  //插入按钮悬停提示
          editButtonTooltip: "Edit",
          ...   //各种提示
      }

[js-grid]: http://js-grid.com
[jQuery]: http://lib.csdn.net/base/jquery