SlickGrid example 1: 最简单的例子和用法

SlickGrid例子和用法

开始学习使用SlickGrid，确实挺好用，挺方便的。

官网地址： https://github.com/mleibman/SlickGrid
 

不多说，先上效果图。

上代码。（源码）

 

   

     

   

   

     

Demonstrates:

     

      

basic gridwith minimal configuration

     

   

 

var grid;//定义表格

//设置列，name为表头显示名称，field为对应域的名字

var columns = [

      {id:"title", name: "Title", field: "title"},

      {id:"duration", name: "Duration", field: "duration"},

      {id:"%", name: "% Complete", field: "percentComplete"},

      {id:"start", name: "Start", field: "start"},

      {id:"finish", name: "Finish", field: "finish"},

      {id:"effort-driven", name: "Effort Driven", field:"effortDriven"}

    ];

//设置表格参数

var options = {

   enableCellNavigation:true,

   enableColumnReorder:false

 };

//定义表格数据变量

var data = [];

$(function () {

//生成表格数据

   for (var i = 0; i< 100; i++) {

    data[i] = {

      title: "Task " + i,

      duration: "5 days",

      percentComplete: Math.round(Math.random() *100),

      start: "01/01/2012",

      finish: "01/05/2012",

      effortDriven: (i % 5 == 0)

    };

   }

//创建grid，“myGrid”为表格生成位置的ID

   grid = newSlick.Grid("#myGrid", data, columns, options);

 });

//定时刷新表格数据

setInterval(function(){

var rows = Math.round(Math.random() * 100);

data = [];

for (var i = 0; i < rows; i++) {

    data[i] = {

      title: "Task " + i,

      duration: "5 days",

      percentComplete: Math.round(Math.random() *100),

      start: "01/01/2012",

      finish: "01/05/2012",

      effortDriven: (i % 5 == 0)

    };

   }

//重新渲染表格

grid.setData(data);

grid.updateRowCount();

grid.render();

},5000);