如何在jQuery网格CRUD? [英] how CRUD in jquery grid ?
本文介绍了如何在jQuery网格CRUD?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的代码有什么问题
我想在jquery网格中添加，更新和删除
这是我的aspx代码-----
what is wrong with my code
i want to add,update and delete in jquery grid
this is my aspx code-----
<link rel="stylesheet"
href="Content/jquery-ui/redmond/jquery-ui-1.8.14.custom.css"
type="text/css" />
<link rel="stylesheet"
href="Content/jquery-grid/ui.jqgrid.css" type="text/css" />
<script src="Scripts/jquery-1.6.2.min.js"
type="text/javascript"></script>
<script src="Scripts/jquery-grid/grid.locale-en.js"
type="text/javascript"></script>
<script src="Scripts/jquery-grid/jquery.jqGrid.min.js"
type="text/javascript"></script>
<script type="text/javascript">
// the url to
var jqDataUrl = "jQGrid/LoadjqData";
// url:'editing.php?q=1',
$(document).ready(function () {
// Set up the jquery grid
$("#jqTable").jqGrid({
// Ajax related configurations
url: jqDataUrl,
datatype: "json",
mtype: "POST",
// Specify the column names
colNames: ["Id", "Name", "Score", "Enrollment"],
// Configure the columns
colModel: [
{ name: "Id", index: "Id", width: 40, align: "left", edit: true, del: true },
{ name: "Name", index: "Name", width: 100, align: "left", edit: true, del: true },
{ name: "Score", index: "Score", width: 200, align: "left", edit: true, del: true },
{ name: "Enrollment", index: "Enrollment", width: 200, align: "left", edit: true, del: true}],
// Grid total width and height
width: 550,
height: 200,
// Paging
toppager: true,
pager: $("#jqTablePager"),
rowNum: 5,
rowList: [5, 10, 20],
viewrecords: true, // Specify if "total number of records" is displayed
// Default sorting
sortname: "Id",
sortorder: "asc",
// Grid caption
caption: "A Basic jqGrid - Read Only"
}).navGrid("#jqTablePager",
{ refresh: true, add: true, edit: true, del: true },
{}, // settings for edit
{}, // settings for add
{}, // settings for delete
{sopt: ["cn"]} // Search options. Some options can be set on column level
);
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table id="jqTable" class="scroll"></table>
<div id="jqTablePager" />
</div>
这是我的c#代码-------
this is my c# code-------
namespace jqGridExamplePart1.Models
{
// The student class
public class Student
{
public int Id { get; set; }
public string Name { get; set; }
public int Score { get; set; }
public DateTime Enrollment { get; set; }
}
// This static class serves as a repository of the student collection
public static class StudentRepository
{
private static readonly List<student> Students = new List<student>();
public static List<student> GetStudents() { return Students; }
// Static constructor to initiate some students in the repository
static StudentRepository()
{
int total = 100;
DateTime now = DateTime.Now;
var scoreRand = new Random();
var enrollmentRand = new Random();
for (int i = 1; i <= total; i++)
{
var student = new Student();
student.Id = i;
student.Name = "Name No." + i.ToString();
student.Score = 60
+ Convert.ToInt16(scoreRand.NextDouble() * 40);
student.Enrollment
= now.AddDays(-1 * (int)(enrollmentRand.NextDouble() * 365 * 10));
Students.Add(student);
}
}
}
}
请帮助.谢谢
please help.Thanks
推荐答案
(document).ready(function(){ // 设置jQuery网格
(document).ready(function () { // Set up the jquery grid
(" ).jqGrid({ // 与Ajax相关的配置 网址:jqDataUrl， 数据类型:" ， mtype:" ， // 指定列名 colNames:[" ，" 名称"， 得分"，" ]， // 配置列 colModel:[ {名称:" ，索引:" Id"，宽度:" 左"， true }， {名称:" ，索引:" 名称"，宽度:" 左"， true }， {名称:" ，索引:" 得分"，宽度:" 左"， true }， {名称:" ，索引:" 注册"，宽度:" 左"， true }]， // 网格的总宽度和高度 宽度: 550 ， 高度: 200 ， // 分页 toppager: true ， 传呼机:
("#jqTable").jqGrid({ // Ajax related configurations url: jqDataUrl, datatype: "json", mtype: "POST", // Specify the column names colNames: ["Id", "Name", "Score", "Enrollment"], // Configure the columns colModel: [ { name: "Id", index: "Id", width: 40, align: "left", edit: true, del: true }, { name: "Name", index: "Name", width: 100, align: "left", edit: true, del: true }, { name: "Score", index: "Score", width: 200, align: "left", edit: true, del: true }, { name: "Enrollment", index: "Enrollment", width: 200, align: "left", edit: true, del: true}], // Grid total width and height width: 550, height: 200, // Paging toppager: true, pager:
(" )， rowNum: 5 ， rowList:[ 5 ， 10 ， 20 ]， viewrecords: true ，// 指定是否记录" // 默认排序 排序名称:" ， 排序顺序:" ， // 网格标题 标题:" }).navGrid(" ， {刷新: true ， add : true ， true ，del: true }， {}，// 编辑设置 {}，// 添加设置 {}，// 删除设置 {sopt:[" ]} // 搜索选项.可以在列级别设置一些选项 ); }); </ 脚本 > </ 头部 > <身体> < form id = " runat = " 服务器" " 类 = " ">> </ 表 > < div id = " /> </ div >
("#jqTablePager"), rowNum: 5, rowList: [5, 10, 20], viewrecords: true, // Specify if "total number of records" is displayed // Default sorting sortname: "Id", sortorder: "asc", // Grid caption caption: "A Basic jqGrid - Read Only" }).navGrid("#jqTablePager", { refresh: true, add: true, edit: true, del: true }, {}, // settings for edit {}, // settings for add {}, // settings for delete {sopt: ["cn"]} // Search options. Some options can be set on column level ); }); </script> </head> <body> <form id="form1" runat="server"> <div> <table id="jqTable" class="scroll"></table> <div id="jqTablePager" /> </div>
这是我的c#代码-------
this is my c# code-------
namespace jqGridExamplePart1.Models
{
// The student class
public class Student
{
public int Id { get; set; }
public string Name { get; set; }
public int Score { get; set; }
public DateTime Enrollment { get; set; }
}
// This static class serves as a repository of the student collection
public static class StudentRepository
{
private static readonly List<student> Students = new List<student>();
public static List<student> GetStudents() { return Students; }
// Static constructor to initiate some students in the repository
static StudentRepository()
{
int total = 100;
DateTime now = DateTime.Now;
var scoreRand = new Random();
var enrollmentRand = new Random();
for (int i = 1; i <= total; i++)
{
var student = new Student();
student.Id = i;
student.Name = "Name No." + i.ToString();
student.Score = 60
+ Convert.ToInt16(scoreRand.NextDouble() * 40);
student.Enrollment
= now.AddDays(-1 * (int)(enrollmentRand.NextDouble() * 365 * 10));
Students.Add(student);
}
}
}
}
请帮忙.谢谢
please help.Thanks
这篇关于如何在jQuery网格CRUD?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
