当前位置: 首页 > 工具软件 > jsGrid > 使用案例 >

JS-Grid插件使用中文解读

慕容康安
2023-12-01
本文转载,原文: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;
 类似资料: