SlickGrid example 1: 最简单的例子和用法
来源:互联网 发布:罗大伦的书可信吗,知乎 编辑:程序博客网 时间:2024/06/04 17:59
SlickGrid例子和用法
开始学习使用SlickGrid,确实挺好用,挺方便的。官网地址: https://github.com/mleibman/SlickGrid
<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>
{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"} ]; enableCellNavigation:true, enableColumnReorder:false }; 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 = newSlick.Grid("#myGrid", data, columns, options); }); 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) }; }
不多说,先上效果图。
上代码。(源码)
<!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%">
</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 = [
//设置表格参数
var options = {
//定义表格数据变量
var data = [];
$(function () {
//生成表格数据
//创建grid,“myGrid”为表格生成位置的ID
//定时刷新表格数据
setInterval(function(){
var rows = Math.round(Math.random() * 100);
data = [];
for (var i = 0; i < rows; i++) {
//重新渲染表格
grid.setData(data);
grid.updateRowCount();
grid.render();
},5000);
</script>
</body>
</html>
- SlickGrid example 1: 最简单的例子和用法
- 一个最简单的sdl显示图片例子sdl example sdl 例子 例程SDL贴图bmp
- SlickGrid example 4: 过滤
- SlickGrid example 2: 按想要的风格展示列
- SlickGrid example 3b: 支持撤销操作的编辑单元
- SlickGrid example 5:带子项的展开收缩
- 类和对象最简单的例子
- SlickGrid example 6:Ajax加载
- SlickGrid example 8:折线图
- SlickGrid example 7:鼠标事件
- ListView-1 最简单的例子
- FreeMarker最简单的例子(1)
- javaEE最简单例子两个属性的用法——action的method和result的name
- 最简单的React和Redux整合的例子
- 最简单的React和Redux整合的例子
- 最简单的ajax例子
- 最简单的FIT例子
- 最简单的d3d例子
- JS无缝滚动图片
- MySQL Boolean Data Type
- 如何建立动态数组
- 你目前是哪种状态
- 定义自己的错误代码
- SlickGrid example 1: 最简单的例子和用法
- SlickGrid example 2: 按想要的风格展示列
- SlickGrid example 3b: 支持撤销操作的编辑单元
- 至今还记忆犹新的即时通讯
- SlickGrid example 3a: 可编辑单元
- 自动配置ipv4
- SlickGrid example 4: 过滤
- SlickGrid example 5:带子项的展开收缩
- SlickGrid example 6:Ajax加载