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

羽翼苍穹

于 2013-01-29 15:53:19 发布

阅读量2.3k

点赞数 1

分类专栏： SlickGrid 文章标签： slickgrid 例子源码用法

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/upskychan/article/details/8553052

版权

SlickGrid 专栏收录该内容

10 篇文章

订阅专栏

SlickGrid例子和用法

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

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

不多说，先上效果图。

上代码。（源码）

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01Transitional//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 1:Basic grid</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" />

</head>

<body>

<table width="100%">

<tr>

<tdvalign="top" width="50%">

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

</td>

<tdvalign="top">

<h2>Demonstrates:</h2>

<ul>

<li>basic gridwith minimal configuration</li>

</ul>

</td>

</tr>

</table>

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

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

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

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

<scripttype="text/javascript">

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);

</script>

</body>

</html>

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。