如何在jqgrid（更新，搜索，删除）中使用ajax，json，jquery，javascript进行crud操作 [英] how to do crud operation in formedit in jqgrid(update,search,delete) using ajax,json,jquery,javascript
问题描述
$（document）.ready（function（）{
var lastSelectedId;
var grid = $（＃employee ）;
$（＃employee）。jqGrid（{
数据类型：function（postdata）{
$ .ajax（{< br $>
url：EmployeeDetails.aspx / getEmployeeDetails，
类型：POST，
contentType：application / json; charset = utf- 8，
数据：JSON.stringify（postdata），
dataType：json，
成功：函数（data，st） {
if（st ==success）{
var grid = $（＃employee）[0];
grid .addJSONData（JSON.parse（data.d））;
}
}，
错误：function（）{
提醒（你不要错过）;
}
}）;
}，
jsonReader：{root：rows，page：page，total：totalpages，记录：totalrecords，单元格：cell，id：EmpId}，
colNames：['EmpId'， 'FirstName'，'LastName'，'MiddleName'，'Gender'，'DateOfBirth'，'MobileNo'，'EmailId'，'Adress'，'Country'，'State'，'zip']，
colModel：[{name：'EmpId'，index：'EmpId'，key：true，hidden：true，width：50，sorttype：int，align：'left'，sortable：true，editable：true }，
{名称：'FirstName'，索引：'FirstName'，宽度：150，sorttype：string，align：'left'，sortable：true ，editable：true，
editrules：{}，formoptions：{rowpos：2，colpos：1}
}，
{name： 'LastName'，索引：'LastName'，宽度：150，sortty pe：string，align：'left'，sortable：true，editable：true，
editrules：{}，formoptions：{rowpos：3，colpos：1}
}，
{名称：'MiddleName'，索引：'MiddleName'，sorttype：string，align：'left'，sortable：true，editable：true，
editrules：{}，formoptions：{rowpos：4，colpos：1}
}，
{名称：'性别'，索引：'性别'， width：50，sorttype：string，align：'left'，sortable：true，editable：true，edittype：'text'，editoptions：{maxlength：20}，
editrules： {required：true，edithidden：true}，formoptions：{rowpos：5，colpos：1}
}，
{name：'DateOfBirth'，index：'DateOfBirth '，width：50，sorttype：string，align：'left' ，sortable：true，editable：true，edittype：'text'，editoptions：{rows：2，cols：20，maxlength：50}，
editrules：{edithidden： true}，formoptions：{rowpos：6，colpos：1}
}，
{名称：'MobileNo'，索引：'MobileNo'，宽度：50，sorttype ：string，align：'left'，sortable：true，editable：true，edittype：'text'，editoptions：{maxlength：20}，
editrules：{edithidden：true} ，formoptions：{rowpos：7，colpos：1}
}，
{name：'EmailId'，index：'EmailId'，width：50，sorttype： string，align：'left'，sortable：true，editable：true，
editrules：{edithidden：true}，formoptions：{rowpos：2，colpos：2}
}，
{name：'Adress'，i ndex：'Adress'，width：50，sorttype：string，align：'left'，sortable：true，editable：true，edittype：'select'，editrules：{required：true，edithidden：true}，formoptions： {rowpos：3，colpos：2}
}，
{name：'State'，index：'State'，width：50，sorttype：string， align：'left'，sortable：true，editable：true，edittype：'text'，editoptions：{maxlength：10}，
editrules：{edithidden：true}，formoptions：{rowpos ：1，colpos：2}
}，
{name：'Country'，index：'Country'，width：50，sorttype：string，align： 'left'，sortable：true，editable：true，
editrules：{edithidden：true}，formoptions：{rowpos：4，colpos：2}
}，
{name：'zip'，index：'Zip'，widt h：50，sorttype：string，align：'left'，sortable：true，editable：true，
editrules：{edithidden：true}，formoptions：{rowpos：5，colpos：2 }
}]，
rowNum：10，
mtype：'GET'，
loadonce：true，
rowList：[10,20,30]，
寻呼机：'#employeepager'，
sortname：'EmpId'，
viewrecords：true，
sortorder：'desc'，
onSelectRow：function（EmpId）{
if（EmpId && EmpId！== lastSelectedId）{
$（'＃employee'）。restoreRow（lastSelectedId）;
lastSelectedId = EmpId
}
}，
editurl：EmployeeDetails.aspx / getEmployeeDetails
}）;
$（'＃employee'）。jqGrid（'navGrid '，'＃employeepager'，
{
编辑：true，
add：true，
del：是的，
搜索：true，
searchtext：搜索，
addtext：添加，
edittext：编辑，
deltext：删除，
editCaption：'编辑员工'，
viewrecords：true，
gridview：true
}，
{
closeOnEscape：true，//按下转义键关闭弹出窗口
reloadAft erSubmit：true，
drag：true，
afterSubmit：function（response，postdata）{
if（response.responseText == ）$
$（this）.jqGrid（'setGridParam'，{datatype：'json'}）。trigger（'reloadGrid'）; //编辑后重新加载网格
返回[true，'']
}
else {
$ （this）.jqGrid（'setGridParam'，{datatype：'json'}）。trigger（'reloadGrid'）; //编辑后重新加载网格
return [false，response.responseText] //在编辑窗口中捕获并显示响应文本
}
}，
editData：{
EmpId：function（）{
var sel_id = $（'＃employee'）。jqGrid（ 'getGridParam'，'selrow'）;
var value = $（'＃employee'）。jqGrid（'getCell'，sel_id，'EmpId'）;
返回价值;
}
}
}，
{
closeAfterAdd：true ，//在添加后关闭添加窗口
afterSubmit：function（response，postdata）{
if（响应。 responseText ==）{
$（this）.jqGrid（'setGridParam'，{datatype：'json'}）。trigger（'reloadGrid'）/ /添加后重新加载网格
返回[true，'']
}
else {
$（这个）.jqGrid（'setGridParam'，{datatype：'json'}）。trigger（'reloadGrid'）//添加
后重新加载网格
返回[false，response.responseText]
}
}
}，
{// DELETE
closeOnEscape：true，
closeAfterDelete：true，
reloadAfterSubmit：true，
closeOnEscape：true，
drag：true ，
afterSubmit：function（response，postdata）{
if（response.responseText ==）{
$（＃employee）。trigger（reloadGrid，[{current：true}]）;
返回[false，response.responseText]
}
else {
$（this）.jqGrid（'setGridParam'，{datatype：'json'}）。trigger（'reloadGrid'）
返回[true，response.responseText]
}
}，
delData：{
EmpId ：function（）{
var sel_id = $（'＃employee'）。jqGrid（'getGridParam'，'selrow'）;
var value = $（'＃ EMPL oyee'）。jqGrid（'getCell'，sel_id，'EmpId'）;
返回值;
}
}
}，
{// SEARCH
closeOnEscape：true
}
）
}）;
myaspx文件代码是
公共静态字符串getEmployeeDetails（）
{
尝试
{
string strJson = string.Empty;
properties_employeedetails obp = new properties_employeedetails（）;
abs_sqldb_employeedetails obl = new abs_sqldb_employeedetails（）;
stringjson json = new stringjson（）;
DataTable dt = obl.employeedetails（obp）;
if（dt。 Rows.Count> 0）
{
strJson = json.json_string（dt）;
}
返回strJson;
}
catch（例外情况）
{
throw（ex）;
}
}
我的班级文件是
公共覆盖DataTable employeedetails（properties_employeedetails emproperties）
{
尝试
{
SqlConnection vcon = new SqlConnection（）;
vcon.ConnectionString = ConfigurationManager.ConnectionStrings [ApplicationServices]。 ConnectionString;
SqlCommand vcmd = new SqlCommand（）;
vcmd.Connection = vcon;
vcmd.CommandType = CommandType.StoredProcedure;
vcmd.CommandText =getEMPLOYEEDETAILS_sp;
SqlDataAdapter sda = new SqlDataAdapter（）;
sda.SelectCommand = vcmd;
DataTable dt = new DataTable （）;
sda.Fill（dt）;
返回dt;
}
catch（Exception ex）
{
throw（ex）;
}
}
$(document).ready(function () {
var lastSelectedId;
var grid = $("#employee");
$("#employee").jqGrid({
datatype: function (postdata) {
$.ajax({
url: "EmployeeDetails.aspx/getEmployeeDetails",
type: "POST",
contentType: "application/json; charset=utf-8",
data: JSON.stringify(postdata),
dataType: "json",
success: function (data, st) {
if (st == "success") {
var grid = $("#employee")[0];
grid.addJSONData(JSON.parse(data.d));
}
},
error: function () {
alert("YOU DID MISTAKE");
}
});
},
jsonReader: { root: "rows", page: "page", total: "totalpages", records: "totalrecords", cell: "cell", id: "EmpId"},
colNames: ['EmpId', 'FirstName', 'LastName', 'MiddleName', 'Gender', 'DateOfBirth', 'MobileNo', 'EmailId', 'Adress', 'Country', 'State', 'zip'],
colModel: [{ name: 'EmpId', index: 'EmpId', key: true, hidden: true, width: 50, sorttype: "int", align: 'left', sortable: true, editable: true},
{ name: 'FirstName', index: 'FirstName', width: 150, sorttype: "string", align: 'left', sortable: true, editable: true,
editrules: {}, formoptions: { rowpos:2, colpos: 1 }
},
{ name: 'LastName', index: 'LastName', width: 150, sorttype: "string", align: 'left', sortable: true, editable: true,
editrules: {}, formoptions: { rowpos: 3, colpos: 1 }
},
{ name: 'MiddleName', index: 'MiddleName', sorttype: "string", align: 'left', sortable: true, editable: true,
editrules: {}, formoptions: { rowpos: 4, colpos: 1 }
},
{ name: 'Gender', index: 'Gender', width: 50, sorttype: "string", align: 'left', sortable: true, editable: true, edittype: 'text', editoptions: { maxlength: "20" },
editrules: { required: true, edithidden: true }, formoptions: { rowpos: 5, colpos: 1 }
},
{ name: 'DateOfBirth', index: 'DateOfBirth', width: 50, sorttype: "string", align: 'left', sortable: true, editable: true, edittype: 'text', editoptions: { rows: "2", cols: "20", maxlength: "50" },
editrules: { edithidden: true }, formoptions: { rowpos: 6, colpos: 1 }
},
{ name: 'MobileNo', index: 'MobileNo', width: 50, sorttype: "string", align: 'left', sortable: true, editable: true, edittype: 'text', editoptions: { maxlength: "20" },
editrules: { edithidden: true }, formoptions: { rowpos: 7, colpos: 1 }
},
{ name: 'EmailId', index: 'EmailId', width: 50, sorttype: "string", align: 'left', sortable: true, editable: true,
editrules: { edithidden: true }, formoptions: { rowpos: 2, colpos: 2 }
},
{ name: 'Adress', index: 'Adress', width: 50, sorttype: "string", align: 'left', sortable: true, editable: true, edittype: 'select', editrules: { required: true, edithidden: true }, formoptions: { rowpos:3, colpos: 2 }
},
{ name: 'State', index: 'State', width: 50, sorttype: "string", align: 'left', sortable: true, editable: true, edittype: 'text', editoptions: { maxlength: "10" },
editrules: { edithidden: true }, formoptions: { rowpos: 1, colpos: 2 }
},
{ name: 'Country', index: 'Country', width: 50, sorttype: "string", align: 'left', sortable: true, editable: true,
editrules: { edithidden: true }, formoptions: { rowpos: 4, colpos: 2 }
},
{ name: 'zip', index: 'Zip', width: 50, sorttype: "string", align: 'left', sortable: true, editable: true,
editrules: { edithidden: true }, formoptions: { rowpos: 5, colpos: 2 }
}],
rowNum: 10,
mtype: 'GET',
loadonce: true,
rowList: [10, 20, 30],
pager: '#employeepager',
sortname: 'EmpId',
viewrecords: true,
sortorder: 'desc',
onSelectRow: function (EmpId) {
if (EmpId && EmpId !== lastSelectedId) {
$('#employee').restoreRow(lastSelectedId);
lastSelectedId = EmpId
}
},
editurl: "EmployeeDetails.aspx/getEmployeeDetails"
});
$('#employee').jqGrid('navGrid', '#employeepager',
{
edit: true,
add: true,
del: true,
search: true,
searchtext: "Search",
addtext: "Add",
edittext: "Edit",
deltext: "Delete",
editCaption: 'Edit Employee',
viewrecords: true,
gridview: true
},
{
closeOnEscape: true, //Closes the popup on pressing escape key
reloadAfterSubmit: true,
drag: true,
afterSubmit: function (response, postdata) {
if (response.responseText == "") {
$(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid'); //Reloads the grid after edit
return [true, '']
}
else {
$(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid'); //Reloads the grid after edit
return [false, response.responseText]//Captures and displays the response text on th Edit window
}
},
editData: {
EmpId: function () {
var sel_id = $('#employee').jqGrid('getGridParam', 'selrow');
var value = $('#employee').jqGrid('getCell', sel_id, 'EmpId');
return value;
}
}
},
{
closeAfterAdd: true, //Closes the add window after add
afterSubmit: function (response, postdata) {
if (response.responseText == "") {
$(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid')//Reloads the grid after Add
return [true, '']
}
else {
$(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid')//Reloads the grid after Add
return [false, response.responseText]
}
}
},
{ //DELETE
closeOnEscape: true,
closeAfterDelete: true,
reloadAfterSubmit: true,
closeOnEscape: true,
drag: true,
afterSubmit: function (response, postdata) {
if (response.responseText == "") {
$("#employee").trigger("reloadGrid", [{ current: true}]);
return [false, response.responseText]
}
else {
$(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid')
return [true, response.responseText]
}
},
delData: {
EmpId: function () {
var sel_id = $('#employee').jqGrid('getGridParam', 'selrow');
var value = $('#employee').jqGrid('getCell', sel_id, 'EmpId');
return value;
}
}
},
{//SEARCH
closeOnEscape: true
}
)
});
myaspx file code is
public static string getEmployeeDetails()
{
try
{
string strJson = string.Empty;
properties_employeedetails obp = new properties_employeedetails();
abs_sqldb_employeedetails obl = new abs_sqldb_employeedetails();
stringjson json = new stringjson();
DataTable dt = obl.employeedetails(obp);
if (dt.Rows.Count > 0)
{
strJson = json.json_string(dt);
}
return strJson;
}
catch (Exception ex)
{
throw (ex);
}
}
my class file is
public override DataTable employeedetails(properties_employeedetails emproperties)
{
try
{
SqlConnection vcon = new SqlConnection();
vcon.ConnectionString = ConfigurationManager.ConnectionStrings["ApplicationServices"].ConnectionString;
SqlCommand vcmd = new SqlCommand();
vcmd.Connection = vcon;
vcmd.CommandType = CommandType.StoredProcedure;
vcmd.CommandText = "getEMPLOYEEDETAILS_sp";
SqlDataAdapter sda = new SqlDataAdapter();
sda.SelectCommand = vcmd;
DataTable dt = new DataTable();
sda.Fill(dt);
return dt;
}
catch (Exception ex)
{
throw (ex);
}
}
推荐答案
（＃employee）;
("#employee");
（＃employee）。jqGrid（{
datatype：function（postdata）{
("#employee").jqGrid({
datatype: function (postdata) {
.ajax（{
url：EmployeeDetails.aspx / getEmployeeDetails，
类型：POST，
contentType：application / json; charset = utf-8，
数据：JSON.stringify（postdata），
dataType：json，
成功：函数（ data，st）{
if（st ==success）{
var grid =
.ajax({
url: "EmployeeDetails.aspx/getEmployeeDetails",
type: "POST",
contentType: "application/json; charset=utf-8",
data: JSON.stringify(postdata),
dataType: "json",
success: function (data, st) {
if (st == "success") {
var grid =
这篇关于如何在jqgrid（更新，搜索，删除）中使用ajax，json，jquery，javascript进行crud操作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
