The Var groups;//user group is another table, so it needs to be loaded before the drop box is used for editing
var editindex = undefined;
var action;
$ (function () {
$.ajax ({
Cache:false,
Async:false,
Type: "POST",
DataType: ' JSON ',
URL: "/areas/manager/handler/webstat/adminlist.ashx?classa=grouplist",
Success:function (data) {
Groups = data;//Load User Group JSON
}
});
List ();
});
Function List () {
$ ("#AdminList"). DataGrid ({
width:800,
height:760,
Title: ' Administrator List ',
URL: '/areas/manager/handler/webstat/adminlist.ashx?classa=list ',
Singleselect:true,
Pagination:true,
Pagesize:30,
PageList: [30, 50, 100],
IDfield: "id",
Columns: [[
{title: ' Number ', field: ' ID ', width:40},
{title: ' Username ', field: ' Name ', width:150, editor: {type: ' Validatebox ',
Options: {required:true, missingmessage: ' cannot be empty '}//validate edit box
}
},
{title: ' User group ', field: ' gid ', width:300, formatter:function (value) {
for (var i = 0; i < groups.length; i++) {
if (Groups[i].gid = = value) return groups[i].groupname;
}
Return value;//user group is another table, loaded as the ID of the User Group table, needs to be formatted to display the user group name
}, Editor: {type: ' ComboBox ', Options: {valuefield: ' gid ',
TextField: ' GroupName ',
data:groups//Edit when User group drop-down box
}
}
},
{title: ' Date ', field: ' Data ', width:160},
{title: ' Action ', field: ' Action ', width:140,
Formatter:function (value, row, index) {
if (row.editing) {
var s = ' <a href= ' # "onclick=" Saverow (This) ">Save</a>";
var c = ' <a href= ' # "onclick=" Cancelrow (This) ">Cancel</a>";
return S + C;
} else {
var e = ' <a href= ' # "onclick=" Editrow (This) ">Edit</a>";
var d = ' <a href= ' # "onclick=" DeleteRow (This) ">Delete</a>";
return e + D;
}
}
}
]],
Toolbar: [{
Text: ' Add ',
Iconcls: ' Icon-add ',
Handler:function () {
Insert ();
}
}],
Onbeforeedit:function (index, row) {
Row.editing = true;
Updateactions (index);
},
Onafteredit:function (index, row) {
Row.editing = false;
Updateactions (index);
},
Oncanceledit:function (index, row) {
Row.editing = false;
Updateactions (index);
}
});
var pager = $ (' #AdminList '). DataGrid (' Getpager '); Page out
}
function Updateactions (index) {//Allow only one line of edits
if (endediting ()) {
$ ("#AdminList"). DataGrid (' SelectRow ', index);
$ (' #AdminList '). DataGrid (' UpdateRow ', {
Index:index,
Row: {}
});
Editindex = index;
} else {
$ (' #AdminList '). DataGrid (' SelectRow ', editindex);
}
}
function endediting () {
if (Editindex = = undefined) {return true;}
if ($ (' #AdminList '). DataGrid (' Validaterow ', Editindex)) {
$ (' #AdminList '). DataGrid (' EndEdit ', editindex);
Editindex = undefined; return true;
} else {return false;}
}
function Getrowindex (target) {
var tr = $ (target). Closest (' Tr.datagrid-row ');
Return parseint (tr.attr (' Datagrid-row-index '));
}
function Editrow (target) {
Action = "Edit";
$ (' #AdminList '). DataGrid (' BeginEdit ', Getrowindex (target));
}
function DeleteRow (target) {
$.messager.confirm (' Confirm ', ' is you sure? ', function (r) {
if (r) {
var row = $ (' #AdminList '). DataGrid (' getselected ');
if (row) {
$.ajax ({
Cache:false,
Async:false,
Type: "POST",
DataType: ' JSON ',
URL: "/areas/manager/handler/webstat/adminlist.ashx?classa=del&id=" + row.id + "",
Success:function (data) {
if (Data > 0) {
$ (' #AdminList '). DataGrid (' reload ');
}
else {
$.messager.alert (' Warning ', ' Save error! ‘);
}
}
});
}
$ (' #AdminList '). DataGrid (' DeleteRow ', Getrowindex (target));
}
});
}
function Saverow (target) {
$ (' #AdminList '). DataGrid (' EndEdit ', Getrowindex (target));
var row = $ (' #AdminList '). DataGrid (' getselected ');
if (row) {
$.ajax ({
Cache:false,
Async:false,
Type: "POST",
DataType: ' JSON ',
URL: "/areas/manager/handler/webstat/adminlist.ashx?classa=" + action + "&id=" + row.id + "&name=" + Row.name + "& Amp;gid= "+ Row.gid,
Success:function (data) {
if (Data > 0) {
$ (' #AdminList '). DataGrid (' reload ');
}
else {
$.messager.alert (' Warning ', ' Save error! ‘);
}
}
});
}
}
function Cancelrow (target) {
$ (' #AdminList '). DataGrid (' CancelEdit ', Getrowindex (target));
}
function Insert () {
if (endediting ()) {
var row = $ (' #AdminList '). DataGrid (' getselected ');
if (row) {
var index = $ (' #tt '). DataGrid (' Getrowindex ', row);
} else {
index = 0;//Add new content, insert only to the first row
// }
$ (' #AdminList '). DataGrid (' InsertRow ', {
Index:index,
Row: {
Status: ' P '
}
});
Action = "ADD";
$ (' #AdminList '). DataGrid (' SelectRow ', index);
$ (' #AdminList '). DataGrid (' BeginEdit ', index);
Editindex = undefined;
}
}
Byhttp://www.jeasyui.com/tutorial/datagrid/datagrid12.php Modificationunresolved: Click Add, then click Edit, add new line is not deleted (think ... )
Easyui DataGrid Additions and Deletions (records)