JS-Grid插件使⽤中⽂解读
1. 传送门：
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" }
]
});
数据配置：
表格数据直接性的为⼀个json数组对象。
状态⽀持转换解析：例如上⾯的country，数字标注的状态被转换为对应的展⽰。
html标注⼀个id为jsGrid的div作为容器，使⽤$(‘#jsGrid’).jsGrid(opt)；配置整个Grid。
⽀持的配置如下：
Fields：//表头字段 [],
data: //表格静态数据源 [],
autoload: false,
controller:{
loadData: Function,
insertItem: Function,
uodateItem: Function,
deleteItem: Function
} //四个控制器，⽤于增删改查与后台交互形式的定义，详细见扩展1 ,
width: "auto",
height: "auto",
heading: true//是否显⽰表头,
filtering: //启动查 false,
inserting: //启动插⼊ false,
editing: //启动编辑 false,
selecting: false,
sorting: //启动排序 false,
paging: //启动分页 false,
pageLoading: //是否⽀持分页加载数据（相⽐较paging，这个属性是向服务器请求数据时要求分页，⽽paging是本地进⾏分页，⽆关服务器） false, rowClass: function(item, index){
} //表格数据加载时，每⾏回调 ,
rowClick: function(args){
args = {item, itemIndex, even}
} //⾏点击时回调，不配置且editing启动时，默认点击为编辑⾏为 ,
rowDoubleClick: function(args){
},
noDataContent: //当所要展⽰的字段是⼀个空数组时显⽰的内容 "Not found",
confirmDeleting: //删除是否弹出确认框 true,
deleteConfirm: //删除确认的⽂本 "Are you sure" ，
pagerContainer: //分页容器,JQuery对象，不超过⼀页时默认不显⽰ null,
pageIndex: 1,
pageSize: 20,
pageButtonCount: 15,
pagerFormat: "Pages: {first} {prev} {pages} {next} {last} {pageIndex} of {pageCount}"//占位符{}，⽀持的占位如实例 ,
pagePrevText: "Prev",
pageNextText: "Next",
pageFirstText: "First",
pageLastText: "Last",
invalidNotify: function(args){
args = { error[] , item , itemIndex , row }
} //数据校验发现错误时回调 ,
invalidMessage: "Invalid data enterd!" ,
updateOnResize: true,
rowRenderer: null,
headerRowRenderer: null,
filterRowRenderer: null,
insertRowRenderer: null,
editRowRenderer: null
Field⽀持配置的字段：
type: "" //可选 "text"|"number"|"checkbox"|"select"|"textarea"|"control" 更多见扩展2 ,
name: "" //从data中取得的字段名 ,
title: "" //显⽰在表头的字段名 ,
align: "" //可选 "left"|"center"|"right"，
width: 100,
visible: true //可⽤,
css: "" //表格展⽰的css样式，需先定义⼀个class类型的css，将字符串声明在此，将会被拼接进所在列的每个td ,
headercss: "" //表头css，同上 ,
filtercss: "" //查框css，同上 ,
insertcss: "" //插⼊时输⼊框css，同上 ,
editcss: "" //编辑时css，同上 ,
filtering: true //可查 ,
inserting: true //可插⼊ ,
editing: true //可编辑 ,
sorting: //可排序 ,
sorter: "string" ,
headTemplate: function(){
} //有什么意思呢？return String作为标题,
itemTemplate: function(value, item){
return string;
} //⾃定义解析每⼀个item，有些场景下可以根据值来判断做什么操作，并返回显⽰内容。
filterTemplate: function(){
},
insertTemplate: function(){
},
editTemplate: function(value, item){
} //点击编辑时候回调，如果编辑操作在另外的页⾯完成可声明此事件并让事件停⽌传播 ,
filterValue: function(){},
insertValue: function(){},
editValue: function(){} //这三个分别是操作提交之后触发,return⼀个值将作为最终的值提交到后台 ,
cellRenderer: function(value, item){
} //⾏渲染器，返回⼀个html元素，⽤于⾃定义列表显⽰形式，例如返回的是div⽽不是td ,
validate: string|object|array|function, //数据校验, ⽀持的有required必填, rangeLength校验长度object --》 {validator: "rangeLength", param: //校验扩展：可以是⼀个返回布尔值的function，也可以是⼀个数组，数组允许多重验证，更可以⾃定义校验--》
jsGrid.validators.time = {
message: "Please enter a valid time",
validator: function(value, item){
return/^([01]\d|2[0-3]|[0-9])(:[0-5]\d){1,2}$/.test(value);
}
}
5. 扩展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
});
}
6. 扩展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 ⾮表单字段，该列显⽰各种控制按钮：
{jquery是什么有什么作用
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",
... //各种提⽰
}
7.⾃定义字段：
引⽤官⽹⼀个例⼦：
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论