JS Grid插件使用
严斌
1. 传送门：js-grid官网
2. 引入css：
<link type='text/css' rel='stylesheet' href='jsgrid.min.css' />
<link type='text/css' rel='stylesheet' href='jsgrid-theme.min.css' />
3. 引入Js：
<script type="text/javascript" src="jsgrid.min.js"></script>
4.配置
var clients = [ { "Name": "Otto Clay", "Age": 25, "Country": 1, "Address": "Ap #897-1459 Quam Avenue", "Married": false }, { "Name": "Connor Johnston", "Age": 45, "Country": 2, "Address": "Ap #370-4647 Dis Av.", "Married": true }, { "Name": "Lacey Hess", "Age": 29, "Country": 3, "Address": "Ap #365-8835 Integer St.", "Married": false }, { "Name": "Timothy Henson", "Age": 56, "Country": 1, "Address": "911-5143 Luctus Ave", "Married": true }, { "Name": "Ramona Benton", "Age": 32, "Country": 3, "Address": "Ap #614-689 Vehicula Street", "Married": false } ]; var countries = [ { Name: "", Id: 0 }, { Name: "United States", Id: 1 }, { Name: "Canada", Id: 2 }, { Name: "United Kingdom", Id: 3 } ]; $("#jsGrid").jsGrid({ width: "100%", height: "400px", inserting: true, editing: true, sorting: true, paging: true, data: clients, fields: [ { name: "Name", type: "text", width: 150, validate: "required" }, { name: "Age", type: "number", width: 50 }, { 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 }, { type: "control" } ] });
5. 完整代码如下：
jquery-3.1.1.min.js 可去自行下载，其他jQuery.min.js也行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<link type="text/css" rel="stylesheet" href="css/jsgrid.min.css" />
<link type="text/css" rel="stylesheet" href="css/jsgrid-theme.min.css" />
<script type="text/javascript" src="js/jsgrid.min.js"></script>
</head>
<body>
<table id="jsGrid"></table>
<div id="list2"></div>
<script>
var clients = [
{ "Name": "Otto Clay", "Age": 25, "Country": 1, "Address": "Ap #897-1459 Quam Avenue", "Married": false },
{ "Name": "Connor Johnston", "Age": 45, "Country": 2, "Address": "Ap #370-4647 Dis Av.", "Married": true },
{ "Name": "Lacey Hess", "Age": 29, "Country": 3, "Address": "Ap #365-8835 Integer St.", "Married": false },
{ "Name": "Timothy Henson", "Age": 56, "Country": 1, "Address": "911-5143 Luctus Ave", "Married": true },
{ "Name": "Ramona Benton", "Age": 32, "Country": 3, "Address": "Ap #614-689 Vehicula Street", "Married": false }
];
var countries = [
{ Name: "", Id: 0 },
{ Name: "United States", Id: 1 },
{ Name: "Canada", Id: 2 },
{ Name: "United Kingdom", Id: 3 },
{ Name: "China", Id: 4 }
];
$("#jsGrid").jsGrid({
width: "100%",
height: "400px",
inserting: true,
editing: true,
sorting: true,
paging: true,
data: clients,
fields: [
{ name: "Name", type: "text", width: 150, validate: "required" },
{ name: "Age", type: "number", width: 50 },
{ 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 },
{ type: "control" }
]
});
</script>
</body>
</html>6. 扩展1 关于Controller
如果都返回jQuery promise，表格将支持异步通知状态，例如删除，会在删除ajax回调成功时做出反应。var promise = $.ajax({}); 那么promise会有done方法，done方法在ajax请求完成时得到执行。所谓promise()作为一个对象的活动集合，ajax将直接返回promise的对象，其它支持的类型可以调用诸如$(“div”).promise()的方法。
loadData 查
loadData: function(filter){
return $.ajax({
type: "get",
url: "items",
data: filter
});
}
pageLoading为true时，filter有pageSize和pageIndex两个参数，sorting为true时，filter有sortFiled和sortOrder两个参数，return一个表格加载的data或者当分页启动时，return如下形式：
{
data
itemsCount
}
insertItem 增
insertItem: function(item){
return $.ajax({
type: "post",
url: "items",
data: item
});
}
updateItem 改
updateItem: function(item){
return $.ajax({
type: "put",
url: "items",
data: item
});
}
返回已更改的item用于更新表数据，否则以提交更改的item作为更新。
deleteItem 删
deleteItem: function(item){
return $.ajax({
type: "delete",
url: "items",
data: item
});
}
7. 扩展2 关于type
text，filed支持多余的以下字段：
readOnly: false, //是否只读，true时，即使编辑也将不可更改。
autosearch: true, //原意应该是搜索时按回车自动定位，但测试貌似没有生效，未知。
number：
sorter: "number", //使用number分类
align: "right", //居右
readOnly: false
select：
{
align: "center",
autosearch: true,
items: [], //用于生成器的数组
valueField: "", //items中映射data字段的值的字段，参照开头例子
textFiled: "", //data中将被items替换显示的字段
seletedIndex: -1, //默认选择的index
valueType: "number|string", 数据类型
readOnly: false
}
checkbox：
{
sorter:"number",
align:"center",
autosearch: true
}
control 非表单字段，该列显示各种控制按钮：
{
editButton: true,
deleteButton: true,
clearFilterButton: true,
modeSwitchButton: true,
align: "center",
width: 50,
filtering: false,
inserting: false,
editing: false,
sorting: false,
searchModeButtonTooltip: "Switch to searching", //搜索按钮悬停提示
insertModeButtonTooltip: "Switch to insertin", //插入按钮悬停提示
editButtonTooltip: "Edit",
... //各种提示
}
类似资料：