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>

时间: 2024-10-13 08:50:44

SlickGrid example 2: 按想要的风格展示列的相关文章

《python基础笔记2》我想要的风格

如果你是一个PHP程序员,或者,在做一些C语言的小型开发,你有否思考过这样的问题:花括号,应该怎么放? 比如像下面这样的两小段代码: 代码1 <?php main(); function main(){ return true; } ?> 代码2 #include<stdio.h> int main(){ return 0; } 请注意上面代码上的花括号,如果是让你来写,你会怎样放置花括号的位置? 对我而言,无论是使用php,还是c语言,把花括号放在行尾,是我在工作项目中,一直喜欢

我想做一个合格的工程师

我想吐槽下,在新公司经过三个月的试用期,前两天终于完成了转正答辩,其实答辩就是两个我们项目组的两个项目经理(一个项目经理马上要离任了,另外一个新来的两个月,继任前者作为项目经理.),还有一个人事的同事.连一个部门经理或者稍大点的领导都没有参与我的答辩.感觉答辩的意义都没有了,但是巨坑的是,新项目经理说“有木有打算培训班学习想法”,“对数据库的应用要学习学习”,我想这不是赤裸裸讽刺我基础太差么?其实我确实来这家公司之前,没有用过MVC,这个能力也学稍弱与这个项目经理.但是我可以讲,我的其他能力绝对

Effective STL: 将vector和string的数据传给历史遗留的C风格API

如果有一个vector对象v,而你需要得到一个指向v中数据的指针,以使得它可以被当作一个数组,只要使用&v[0]就可以了.对于string对象s,相应的咒语是简单的s.c_str(). void doSomething(const int* pInts, size_t numInts); if (!v.empty()) // 如果v为空,&v[0]试图产生一个指向根本就不存在的东西的指针 { doSomething(&v[0], v.size()); } // 以上从vector上

怀旧风格照片特效

我想说怀旧风格的效果很容易实现,就那么几句话,也没啥可说的. 1 % 怀旧风格滤镜 2 clear all; 3 close all; 4 [FileName,PathName] = uigetfile('*.jpg','Open an Image File'); 5 img = imread([PathName FileName]); 6 figure, imshow(img); 7 img = double(img); 8 Rimg = img(:,:,1); 9 Gimg = img(:,

最近背单词蛋疼,想写个桌面note的小程序方便一下,嘛嘛,那就记录一下好了,毫无优化,自娱自乐。

首先用的还是winform,因为WPF那一套忘得有点多. 第一个问题出在窗口位置挪动上,因为想用None风格的窗体,但是在onMouseMove事件中取MousePosition-e.X之后发现这个值是一定的,就是本来打算用鼠标坐标减去鼠标相对窗体坐标得到窗体相对屏幕坐标,但是在计算的时候如果把e.X取在onMouseMove事件中,那么这个e.X也是会随着鼠标移动而变化的,最终导致差不变,那就不能实现窗体移动了. 蛋疼了,最后在form类中设了两个私有变量Left,Top,在onMouseDo

Android Studio设置代码风格

在Android Studio里面想设置代码风格, 在这里我想把代码风格从Java的行尾式改成C风格的代码,如下 if(true) { // TODO } if(true) { // TODO } 其实很简单可以直接进入settings,然后搜索CodeStyle选择Java进入如下界面 在这里选择Wrapping and Braces 在Braces placement下可以看到In class declaration, In method declaration, Other对应的是End

VB|xp风格:终于解决了“图片优化软件”在部分xp系统上无法启动的问题。

一年以来,图片优化软件一直存在一个“兼容”性问题. 因为之前的软件是在windows 2003系统上开发的,制作成安装文件后,经部分用户测试发现,在部分用户的xp系统上安装后,无法正常启动,只能听到peng!的一声,界面无法显示. 今天有空,我决定重新检查代码,开始的时候我以为是因为一些api引起的,通过排除法,将代码段减少到最低程序,但依然没有解决问题. 我新建了一个窗口,然后在vb的工程属性中,将默认启动窗口改为新建的窗口 form1,生成exe文件后测试,竟然能够启动.但是当我在这个for

log4j(四)——如何控制不同风格的日志信息的输出?

一.测试环境 与log4j(一)--为什么要使用log4j?一样,这里不再重述 二.老规矩,先来个例子,然后再聊聊感受 package com.sc.log4j; import org.apache.log4j.Appender; import org.apache.log4j.BasicConfigurator; import org.apache.log4j.ConsoleAppender; import org.apache.log4j.Layout; import org.apache.

企业怎样设计网站主题及风格

亲戚觉得自己家公司的官网不够吸引人,想换种风格,所以来找我讨论,哪种风格更符合自己的公司形象,一个企业的官网就相当于一个人的外在形象,一个人如果长相.打扮.举止都很优秀就会给人一种被吸引的感觉,相反的话就会让人不想再看第二眼.当客户不了解这个公司,要不就是亲自到店里了解,但是更多的人会选择在网上搜索,进入官网看看就可以大概看出这个公司的忘网站设计水平.所以官网的形象对于公司来说是非常重要的,现在就给大家介绍一下企业应该如何设计属于自己的网站主题与风格. 第一步就要确定一下网站的主题,主题影响着整