<script type="text/java script">
$(function() {
var editRow = undefined;//用于存放当前编辑行的index
$('#datagrid').datagrid({
url : 'login_getJson.action',
title : '用户列表',
iconCls : 'icon-save',
pagination : true,
pageSize : 10,
pageList : [ 10, 20, 30, 40, 50, 60, 70, 80, 90, 100 ],
fit : true,//使表格自适应
fitColumns : true,//使得表格中所有的列宽相加等于自适应的宽度、也就是浏览器改变大小的时候下方会不会出现滚动条、一般只有在列较少的时候使用
nowrap : false,//表格中的文字可以换行、默认是false、不能换行、这样在文字很多的时候就看不到全部：使用真实的数据去测试
border : false,
idFeild : 'id',//标识、会记录我们选中项的id、不一定是id、通常使用主键
sortName : 'id',//设置默认排序时的 字段（必须是field中的一个字段）
sortOrder : 'asc',//是按照升序还是降序排序 但是仅仅添加这两个字段并不会自动排序、这样写的意义就是前台会自动的向后台传递两个参数：sort order,我们可以在后台查询记录的时候进行排序
columns : [ [ {
title : '编号',
field : 'id',
width : 100,//必须要给
//sortable:true,//指定按照这个排序
checkbox : true,
}, {
title : '姓名',
field : 'userName',
width : 100,//必须要给
editor : {
type:'validatebox',
options:{
required: true,
}
}
}, {
title : '密码',
field : 'passWord',
width : 100,//必须要给
editor : {
type:'validatebox',
options:{
required: true,
}
}
}, {
title : '创建时间',
field : 'createTime',
width : 100,//必须要给
editor : {
type:'datetimebox',//扩展的用于选择具体时间的类型
options:{
required: true,
}
}
}, {
title : '修改时间',
field : 'updateTime',
width : 100,//必须要给
editor : {
type:'datetimebox',//扩展的用于选择具体时间的类型
options:{
required: true,
}
}
} ] ],
toolbar : [ {
text : '增加',
iconCls : 'icon-add',
handler : function() {
if(editRow != undefined){
$('#datagrid').datagrid('endEdit', editRow);
}
if(editRow == undefined){
$('#datagrid').datagrid('addEditor', {
field : 'passWord',
editor : {
type:'validatebox',
options:{
required: true,
}
}
});
$('#datagrid').datagrid('insertRow', {
index : 0,
row : {
id : "1",
userName:'请输入名称',
passWord:'请输入密码'
}
});
editRow = 0;
$('#datagrid').datagrid('beginEdit',0);
/* 在最后一行添加一个增加行。
$('#datagrid').datagrid('appendRow', {
});
var rows = $('#datagrid').datagrid('getRows').length;
$('#datagrid').datagrid('beginEdit',rows-1);
*/
}
}
}, '-', {
text : '删除',
iconCls : 'icon-remove',
handler : function() {
var rows = $('#datagrid').datagrid('getSelections');
if(rows.length > 0){
$.messager.confirm('请确认','您确定要删除当前选择的'+rows.length+'项吗？', function(option){
if(option){
//一般将id的一个集合传到后台删除
var ids = [];
for(var i = 0; i< rows.length; i++){
ids.push(rows[i].id);
}
console.info(ids.join(','));
/*在这里将id拼接的字符串传到后台、将其删除、调用ajax、在
ajax的success中再重新加载一下datagrid表格:
$('#datagrid').datagrid('load',{});
*/
}
});
}else{
$.messager.alert('提示', '请选择要删除的记录', 'error');
}
}
}, '-', {
text : '修改',
iconCls : 'icon-edit',
handler : function() {
var rows = $('#datagrid').datagrid('getSelections');
if(rows.length ==1){
//修改时、取消密码一栏的可编辑状态
$('#datagrid').datagrid('removeEditor', 'passWord');
if(editRow != undefined){
$('#datagrid').datagrid('endEdit', editRow);
}
if(editRow == undefined){
var rowIndex = $('#datagrid').datagrid('getRowIndex',rows[0]);
$('#datagrid').datagrid('beginEdit',rowIndex);
editRow = rowIndex;
$('#datagrid').datagrid('unselectAll');
}
}else if( rows.length == 0){
$.messager.alert('提示', '请选择一条修改记录！','info');
}else if(rows.length >= 1){
$.messager