JS Grid插件使用

最新推荐文章于 2020-11-08 23:27:13 发布

ruthy-wei

最新推荐文章于 2020-11-08 23:27:13 发布

阅读量4k

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/ruthywei/article/details/74295612

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1. 传送门：js-grid官网

2. 引入css：

<link  type='text/css'  rel='stylesheet'  href='jsgrid.min.css'  />
<link  type='text/css'  rel='stylesheet'  href='jsgrid-theme.min.css'  />

3. 引入Js：

<script  type="text/javascript"  src="jsgrid.min.js"></script>

4.配置


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  }
];


$("#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"  }
    ]
});

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",
      ...   //各种提示
  }

ruthy-wei

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS Grid插件使用

1. 传送门：js-grid官网2. 引入css：3. 引入Js：4.配置var clients = [ { "Name": "Otto Clay", "Age": 25, "Country": 1, "Address": "Ap #897-1459 Quam Avenue", "Married": false }, { "
复制链接

扫一扫