jsGrid使用入门
jsGrid使用入门
jsGrid资源地址:
http://js-grid.com/,该资源地址提供了详细的demo、文档等资料信息
jsGrid是在jQuery基础上实现的表格插件,简单易用,该插件依赖jquery以及jquery-ui的样式文件;
jsGrid的引入使用,如下示意:
引入css:
<link type='text/css' rel='stylesheet' href='jsgrid.min.css' />
<link type='text/css' rel='stylesheet' href='jsgrid-theme.min.css' />
引入Js:
<script type="text/javascript" src="jsgrid.min.js"></script>
jsGrid通过配置属性的设定,完成基本使用信息设置,示例代码如下
$("#jsGrid").jsGrid({
width: "100%",
height: "400px",
filtering: true,
inserting: false,
editing: true,
sorting: true,
paging: true,
pageLoading: true,
pageSize: 8,
autoload: false,
deleteConfirm: "确认需要删除数据?",
loadMessage: "正在装载数据,请稍候......",
fields: [
{ name: "Name", type: "text", width: 150, validate: "required" },
{ name: "Age", type: "number", width: 50, validate: { validator: "range",param: [18,80]} },
{ name: "Address", type: "text", width: 200 },
{ name: "Country", type: "select", items: countries, valueField: "Id", textField: "Name" },
{ name: "Married", type: "checkbox", title: "Is Married", sorting: false },
{ name: "Born", type: "date", title: "Born Date", },
{
type: "control",
modeSwitchButton: true,
editButton: false,
width: 100,
headerTemplate: function () {
$button = $("<button>").attr("type", "button").text("Filter")
.on("click", function () {
$("#jsGrid").jsGrid("option", "filtering", !($("#jsGrid").jsGrid("option", "filtering")));
return false;
});
//return $("p").html("kkkkk"); return $("<button>").attr("type", "button").text("Add")
.on("click", function () {
dialog.showDetailsDialog("Add", {});
}); }
}
]
});
jsGrid的data配置项目,支持静态数据源的指定,通过controller属性的设置,支持动态从服务器端请求载入数据。controller是支持通过回调方式载入数据的对象,包含了四类方法:
updateItem: $.noop,
deleteItem: $.noop
}
在上面的示例中,loadData表示从服务器端请求数据的方法,在上述示例中将暂定将该方法定义为空;insertItem表示从插入数据的方法,当完成数据编辑是可通过该方法向服务端提交数据;updateItem、deleteItem分别表示更改数据和删除数据的方法,上述方法均支持jQuery的延迟对象方法,通过异步的方式实现数据的增、删、改、查,当服务端完成数据操作并返回操作应答后获取响应结果。示例代码如下:
在dialoge对象中定义loadData方法:
var loadData = function (e) { //==============定义延迟加载 var d = $.Deferred(); //=================服务端分页需要将页面索引传递到服务端======================= pageSize = e.pageSize; pageIndex = e.pageIndex; $.ajax({
url: '/Grid/IndexData',
type: 'post',
dataType: 'json',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify(datas)
}
).done(function (e) {
alert('load data successed');
//===========================服务端分页的话就没必要取子集了=========================
subdata = e.slice(pageSize * (pageIndex - 1), pageSize * pageIndex);
pagingdata = { data: subdata, itemsCount: e.length };
//============服务端完成时发出完成通知==================
d.resolve(pagingdata);
}).fail(function (e) {
alert('load failed!');
}); //=============向loadData返回延迟加载方法=================== return d.promise();
};
设置jsGrid 中Controller的 loadData方法为对应对象的方法:
controller: { loadData: dialog.loadData },
设置jsGrid中loadData的响应函数:
//==============loadData延迟加载触发响应通知==================
$("#jsGrid").jsGrid("loadData").done(function (e) {
//================loadData事件在数据加载完毕且页面渲染完毕后触发====================
//================只有在绑定事件的对象已创建后添加事件才有实际作用=================
$(".jsgrid-control-field").on("click", function () {
alert("delete click!");
//=============取消事件冒泡=========================
return false;
});
});
jsGrid的行渲染:为一个函数,该函数返回包含tr标签的行信息,示例如下:
rowRenderer: function (item, itemIndex) {
//var trs = {};
$row = undefined;
$col = undefined;
var colors = "";
//===============区分奇、偶行信息设置不同的背景行颜色==================
switch (itemIndex % 2) {
case 0:
$row = $("<tr>").addClass("jsgrid-alt-row").css("background-color", "#FFE4C4");
colors = "#FFE4C4";
break;
case 1:
$row = $("<tr>").addClass("jsgrid-row").css("background-color", "#F0F0F0");
colors = "#F0F0F0";
break;
}
var j= 0;
for (i in item) {
//==============================获取在定义jsGrid对象时,在config中设置的fields信息=========
width = $("#jsGrid").jsGrid("option", "fields")[j].width;
$col = $("<td>").addClass('jsgrid-cell jsgrid-align-center').css("width", String(width)+"px").css("background-color", colors);
$row.append($col.append(item[i]));
j++;
} $col = $("<td>").addClass('jsgrid-cell jsgrid-control-field jsgrid-align-center').css("width", "50px").css("background-color", colors);
$row.append($col.append($("<input>").addClass("jsgrid-button jsgrid-delete-button").attr("title", "delete").attr("type","button")));
return $row; //$("table tr:nth-child(even)").css("background-color", "#FFE4C4");
//$("table tr:nth-child(odd)").css("background-color", "#F0F0F0");
},
在jsGrid中,表头渲染也采用类似的方式,具体见帮助文档======
jsGrid使用入门的更多相关文章
- Angular2入门系列教程7-HTTP(一)-使用Angular2自带的http进行网络请求
上一篇:Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数 感觉这篇不是很好写,因为涉及到网络请求,如果采用真实的网络请求,这个例子大家拿到手估计还要自己写一个web ...
- ABP入门系列(1)——学习Abp框架之实操演练
作为.Net工地搬砖长工一名,一直致力于挖坑(Bug)填坑(Debug),但技术却不见长进.也曾热情于新技术的学习,憧憬过成为技术大拿.从前端到后端,从bootstrap到javascript,从py ...
- Oracle分析函数入门
一.Oracle分析函数入门 分析函数是什么?分析函数是Oracle专门用于解决复杂报表统计需求的功能强大的函数,它可以在数据中进行分组然后计算基于组的某种统计值,并且每一组的每一行都可以返回一个统计 ...
- Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数
上一篇:Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数 之前介绍了简单的路由以及传参,这篇文章我们将要学习复杂一些的路由以及传递其他附加参数.一个好的路由系统可以使我们 ...
- Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数
上一篇:Angular2入门系列教程-服务 上一篇文章我们将Angular2的数据服务分离出来,学习了Angular2的依赖注入,这篇文章我们将要学习Angualr2的路由 为了编写样式方便,我们这篇 ...
- Angular2入门系列教程4-服务
上一篇文章 Angular2入门系列教程-多个组件,主从关系 在编程中,我们通常会将数据提供单独分离出来,以免在编写程序的过程中反复复制粘贴数据请求的代码 Angular2中提供了依赖注入的概念,使得 ...
- wepack+sass+vue 入门教程(三)
十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...
- wepack+sass+vue 入门教程(二)
六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...
- wepack+sass+vue 入门教程(一)
一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...
随机推荐
- Nginx七层负载均衡的几种调度算法
Nginx是一款轻量级的高性能web服务器,同时也是一款非常优秀的负载均衡器和反向代理服务器.由于支持强大的正则匹配规则.动静分离.URLrewrite功能及安装配置简单且对网络稳定性依赖非常小等 ...
- 数据库系统概论(新技术篇)--中国人民大学【第13讲】KEY-VALUE数据库(键值对数据库)
市面上主流的分布式文件系统(FS): (Hadoop的)HDFS,(Google的)GFS 详见ppt 1.数据服务与键值对数据库: 数据服务:data serving数据服务:数据的简单 ...
- Java面试题:HashMap和HashTable的区别
HashMap和HashTable的区别是面试时面试官经常问的问题,在回答的时候可以选择重点做回答,区别主要有下面几点:key和value的取值范围不同HashMap和HashTable都是基于哈希表 ...
- Magic Master(2019年南昌网络赛E题+约瑟夫环)
目录 题目链接 题意 思路 代码 题目链接 传送门 题意 初始时你有\(n\)张牌(按顺序摆放),每一次操作你将顶端的牌拿出,然后按顺序将上面的\(m\)张牌放到底部. 思路 首先我们发下拿走\(1\ ...
- [TJOI2015]弦论(后缀自动机)
传送门 题意: 对给定字符串\(s\),求其第\(k\)小子串,重复串被计入以及不被计入这两种情况都需考虑. 思路: 首先构建后缀自动机,之后就考虑在后缀自动机上\(dp\). 我们知道如果要考虑重复 ...
- 3DMax下载与安装(注册机为网上收集,仅供学习与研究,支持正版)
3DS Max 全称3D Studio Max,是Autodesk公司开发的三维动画制作和渲染软件(Autodesk AutoCAD 2012也是Autodesk公司的软件产品) 3DS Max广泛应 ...
- redis常用操作(测试必备)
连接redis redis的安装及基础配置,参考:https://www.cnblogs.com/UncleYong/p/9882843.html redis中,数据是key-value方式存储,ke ...
- Windows server 2003 粘滞键后门+提权
Windows server 2003中可以建立粘滞键与cmd的连接来绕过已经设置好的安全机制做一些事情,比如新建用户.提权 粘滞键介绍 网上查了一些资料,也没怎么说明白,不如自己试一下,大概意思就是 ...
- IDEA中各种图标
前言 在用这个开发工具之前对大量的图标先有所了解,会提高不少效率 首先讲下基本的图标 Java类 Java抽象类 Groovy类 注解类 枚举类 异常类 最终的类 接口 包含有main方法的可 ...
- 请解释一下css3的flexbox(弹性盒布局模型),以及适用场景
弹性盒模型是c3规范的新的布局方式,该布局模型的目的是提供一种更加高效的方式来对容器的条目进行布局.对齐和分配空间.在传统的布局中,block布局是把块级元素在垂直方向从上向下一次排列的,而inlin ...