ส่วนของ Model - Auto generated by Visual Studio
public partial class Master_Plant
{
public Master_Plant()
{
this.Master_Product = new HashSet<Master_Product>();
}
public int plant_id { get; set; }
public string plant_name { get; set; }
public virtual ICollection<Master_Product> Master_Product { get; set; }
}
ส่วนของ View
<script type="text/javascript">
$(document).ready(function () {
jQuery("#grid_plant").jqGrid({
url: '/Admin/GridPlantData/',
datatype: 'json',
mtype: 'POST',
colNames: ['Plant ID', 'Plant Name'],
colModel: [
{ name: 'plant_id', index: 'plant_id', key: true, width: 100, align: 'center', editable: true, editrules: { edithidden: false } },
{ name: 'plant_name', index: 'plant_name', width: 200, align: 'center', sortable: true, editable: true, edittype: 'text', editrules: { required: true } }
],
pager: jQuery('#pager_plant'),
rowNum: 10,
rowList: [5, 10, 20, 50],
//autowidth: true,
width: '300',
height: 'auto',
sortname: 'plant_id',
sortorder: "asc",
viewrecords: true,
caption: 'Plant Master',
scrollOffset: 0
});
jQuery("#grid_plant").jqGrid('navGrid', '#pager_plant',
{ edit: true, add: true, del: true, search: false, view: true },
{ url: "/Admin/EditPlant", closeAfterEdit: true, beforeShowForm: function (formid) { $("#tr_plant_id", formid).hide(); } },
{ url: "/Admin/AddPlant", closeAfterAdd: true, beforeShowForm: function (formid) { $("#tr_plant_id", formid).hide(); } },
{ url: "/Admin/DeletePlant" }, {});
});
</script>
<table id="grid_plant">
</table>
<div id="pager_plant"></div>
ส่วนของ Controller
ส่วนของการดึงข้อมูลมาแสดง
public ActionResult GridPlantData(string sidx, string sord, int page, int rows, string search)
{
var pageIndex = Convert.ToInt32(page) - 1;
var pageSize = rows;
var totalRecords = dbQIS.Master_Plant.Count();
var totalPages = (int)Math.Ceiling(totalRecords / (float)pageSize);
// This is possible because I'm using the LINQ Dynamic Query Library
var plants = dbQIS.Master_Plant
.OrderBy(sidx + " " + sord)
.Skip(pageIndex * pageSize)
.Take(pageSize).AsEnumerable();
var jsonData = new
{
total = totalPages,
page = page,
records = totalRecords,
rows = plants.Select(p => new
{
i = p.plant_id,
cell = new object[] {
p.plant_id,
p.plant_name
}
}).ToArray()
};
return Json(jsonData);
}
ส่วนของการเพิ่มข้อมูล
public ActionResult AddPlant(string plant_name)
{
try
{
var db = new QISEntities();
Master_Plant mp = new Master_Plant();
mp.plant_name = plant_name;
db.Master_Plant.Add(mp);
db.SaveChanges();
return Json(true);
}
catch (Exception)
{
// Do some error logging stuff, handle exception, etc.
return Json(false);
}
}
ส่วนของการแก้ไขข้อมูล
public ActionResult EditPlant(int plant_id, string plant_name)
{
try
{
var db = new QISEntities();
var query = from u in db.Master_Plant
where u.plant_id.Equals(plant_id)
select u;
var plant = query.First();
plant.plant_name = plant_name;
db.SaveChanges();
return Json(true);
}
catch (Exception)
{
return Json(false);
}
}
ส่วนของการลบข้อมูล
//[HttpPost]
public ActionResult DeletePlant(int id = 0)//Set = 0 is default value
{
try
{
var db = new QISEntities();
var plant = db.Master_Plant.Find(id);
db.Master_Plant.Remove(plant);
db.SaveChanges();
return Json(true);
}
catch (Exception)
{
return Json(false);
}
}

ลองเอาโค๊ดตัวอย่างไปศึกษาดูครับ ไม่ยากครับ
น่าสนใจมากๆครับ เพราะเห็นว่าตัว jqgrid เป็น datagrid ที่ โหลดข้อมูลแบบ AJAX ทำให้สามารถโหลดข้อมูลมากๆ (อาจเป็นล้าน) ได้ในเวลาไม่กี่วินาทีเท่านั้น
ส่วนใครที่กำลังตัดสินใจว่าจะใช้ plugin ตัวไหนก็แนะนำตัวนี้ครับ สามารถใช้ได้กับ PHP หรือ ASP.NET web form ได้ด้วยครับ
ลิงค์ official ของ jqgrid
http://www.trirand.com/blog/?page_id=5