SlickGrid example 2: 按想要的风格展示列

先上效果图。

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>SlickGrid example 2: Formatters</title>

<link rel="stylesheet" href="../css/slick.grid.css" type="text/css" />

<link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css" />

<link rel="stylesheet" href="../css/examples.css" type="text/css" />

<style>

    .cell-title {

      font-weight: bold;

    }

 

    .cell-effort-driven {

      text-align: center;

    }

  </style>

</head>

<body>

<table width="100%">

  <tr>

    <td valign="top" width="50%">

      <div id="myGrid" style="width:600px;height:500px;"></div>

    </td>

    <td valign="top">

      <h2>Demonstrates:</h2>

      <ul>

        <li>width, minWidth, maxWidth, resizable, cssClass column attributes</li>

        <li>custom column formatters</li>

      </ul>

    </td>

  </tr>

</table>

 

<script src="../js/firebugx.js"></script>

<script src="../js/jquery-1.7.min.js"></script>

<script src="../js/jquery-ui-1.8.16.custom.min.js"></script>

<script src="../js/jquery.event.drag-2.0.min.js"></script>

<script src="../js/slick.core.js"></script>

<script src="../js/slick.formatters.js"></script>

<script src="../js/slick.grid.js"></script>

 

<script type="text/javascript">

var grid;//定义表格

//设置列显示样式

var columns = [

    {id: "title", name: "Title", field: "title", width: 120, cssClass: "cell-title"},

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

    {id: "%", name: "% Complete", field: "percentComplete", width: 80, resizable: false, formatter: Slick.Formatters.PercentCompleteBar},

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

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

    {id: "effort-driven", name: "Effort Driven", sortable: false, width: 80, minWidth: 20, maxWidth: 80, cssClass: "cell-effort-driven", field: "effortDriven", formatter: Slick.Formatters.Checkmark}

  ];

//设置表格参数

var options = {

    editable: false,

    enableAddRow: false,

    enableCellNavigation: true

  };

//定义表格数据变量

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 = new Slick.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);

</script>

</body>

</html>