JS-Grid插件使用中文解读

本文转载，原文：http://blog.csdn.net/chemmuxin1993/article/details/52515131

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'  />
1
2
3

3. 引入Js：

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

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"  }    ]});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

• 数据配置： 
  表格数据直接性的为一个json数组对象。 
  状态支持转换解析：例如上面的country，数字标注的状态被转换为对应的展示。 
  html标注一个id为jsGrid的div作为容器，使用$(‘#jsGrid’).jsGrid(opt);配置整个Grid。

• 支持的配置如下：

      Fields： //表头字段 [],      data: //表格静态数据源 [],      autoload: false,      controller:{          loadData: Function,          insertItem: Function,          uodateItem: Function,          deleteItem: Function      } //四个控制器，用于增删改查与后台交互形式的定义,详细见扩展1 ,      width: "auto",      height: "auto",      heading: true //是否显示表头,      filtering: //启动查找 false,      inserting: //启动插入 false,      editing: //启动编辑 false,      selecting: false,      sorting: //启动排序 false,      paging: //启动分页 false,      pageLoading: //是否支持分页加载数据（相比较paging，这个属性是向服务器请求数据时要求分页，而paging是本地进行分页，无关服务器） false,      rowClass: function(item, index){      } //表格数据加载时，每行回调 ,      rowClick: function(args){          args = {item, itemIndex, even}      } //行点击时回调，不配置且editing启动时，默认点击为编辑行为 ,      rowDoubleClick: function(args){      },      noDataContent: //当所要展示的字段是一个空数组时显示的内容 "Not found",      confirmDeleting: //删除是否弹出确认框 true,      deleteConfirm: //删除确认的文本 "Are you sure" ，      pagerContainer: //分页容器,JQuery对象,不超过一页时默认不显示 null,      pageIndex: 1,      pageSize: 20,      pageButtonCount: 15,      pagerFormat: "Pages: {first} {prev} {pages} {next} {last} {pageIndex} of {pageCount}" //占位符{}，支持的占位如实例 ,      pagePrevText: "Prev",      pageNextText: "Next",      pageFirstText: "First",      pageLastText: "Last",      invalidNotify: function(args){          args = { error[] , item , itemIndex , row }      } //数据校验发现错误时回调 ,      invalidMessage: "Invalid data enterd!" ,      updateOnResize: true,      rowRenderer: null,      headerRowRenderer: null,      filterRowRenderer: null,      insertRowRenderer: null,      editRowRenderer: null
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

• Field支持配置的字段：

    type: "" //可选 "text"|"number"|"checkbox"|"select"|"textarea"|"control" 更多见扩展2 ,  name: "" //从data中取得的字段名 ,  title: "" //显示在表头的字段名 ,  align: "" //可选 "left"|"center"|"right"，  width: 100,  visible: true //可用,  css: "" //表格展示的css样式，需先定义一个class类型的css，将字符串声明在此，将会被拼接进所在列的每个td ,  headercss: "" //表头css，同上 ,  filtercss: "" //查找框css，同上 ,  insertcss: "" //插入时输入框css，同上 ,  editcss: "" //编辑时css，同上 ,  filtering: true //可查 ,  inserting: true //可插入 ,  editing: true //可编辑 ,  sorting: //可排序 ,  sorter: "string" ,  headTemplate: function(){  } //有什么意思呢？return String作为标题,  itemTemplate: function(value, item){      return string;  } //自定义解析每一个item，有些场景下可以根据值来判断做什么操作，并返回显示内容。  filterTemplate: function(){  },  insertTemplate: function(){  },  editTemplate: function(value, item){  } //点击编辑时候回调，如果编辑操作在另外的页面完成可声明此事件并让事件停止传播 ,  filterValue: function(){},  insertValue: function(){},  editValue: function(){} //这三个分别是操作提交之后触发,return一个值将作为最终的值提交到后台 ,  cellRenderer: function(value, item){  } //行渲染器，返回一个html元素，用于自定义列表显示形式，例如返回的是div而不是td ,  validate: string|object|array|function, //数据校验, 支持的有 required 必填, rangeLength 校验长度object --》 {validator: "rangeLength", param: 16} , range 校验范围object --》 {validator: "range", param: [21,  80]}, minLength, maxLength, min, max, pattern.  //校验扩展：可以是一个返回布尔值的function，也可以是一个数组，数组允许多重验证，更可以自定义校验--》  jsGrid.validators.time = {      message: "Please enter a valid time",      validator: function(value, item){          return /^([01]\d|2[0-3]|[0-9])(:[0-5]\d){1,2}$/.test(value);      }  }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33
  34
  35
  36
  37
  38
  39
  40
  41
  42
  43
  44
  45
  46

5. 扩展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      });  }
1
2
3
4
5
6
7
8

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

  {    data    itemsCount  }
1
2
3
4
5

insertItem 增

  insertItem: function(item){      return $.ajax({          type: "post",          url: "items",          data: item      });  }
1
2
3
4
5
6
7
8

updateItem 改

  updateItem: function(item){      return $.ajax({          type: "put",          url: "items",          data: item      });  }
1
2
3
4
5
6
7
8

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

deleteItem 删

  deleteItem: function(item){      return $.ajax({          type: "delete",          url: "items",          data: item      });  }
1
2
3
4
5
6
7
8

6. 扩展2 关于type

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

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

number：

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

select：

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

checkbox：

  {      sorter:"number",      align:"center",      autosearch: true  }
1
2
3
4
5
6

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",      ...   //各种提示  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

7.自定义字段：

引用官网一个例子：

var MyDateField = function(config) {    jsGrid.Field.call(this, config);};MyDateField.prototype = new jsGrid.Field({    css: "date-field", // redefine general property 'css'    align: "center", // redefine general property 'align'    sorter: function(date1, date2) {        return new Date(date1) - new Date(date2);    },    itemTemplate: function(value) {        return new Date(value).toDateString();    },    insertTemplate: function(value) {        return this._insertPicker = $("<input>").datepicker({            defaultDate: new Date()        });    },    editTemplate: function(value) {        return this._editPicker = $("<input>").datepicker().datepicker("setDate", new Date(value));    },    insertValue: function() {        return this._insertPicker.datepicker("getDate").toISOString();    },    editValue: function() {        return this._editPicker.datepicker("getDate").toISOString();    }});jsGrid.fields.date = MyDateField;