پیشنیاز این بحث مطالعه‌ی مطلب «
صفحه بندی و مرتب سازی خودکار اطلاعات به کمک jqGrid در ASP.NET MVC» است و در اینجا جهت کوتاه شدن بحث، صرفا به تغییرات مورد نیاز جهت اعمال بر روی مثال اول اکتفاء خواهد شد.
تغییرات مورد نیاز جهت فعال سازی ویرایش، حذف و افزودن رکوردهای jqGrid
می‌خواهیم در بدو نمایش گرید، یک ستون خاص دارای دکمه‌های ویرایش و حذف ظاهر شوند:
برای اینکار تنها کافی است در انتهای ستون‌های تعریف شده، یک ستون خاص را با formatter مساوی actions ایجاد کنیم:
colModel: [
{
// سایر ستون‌ها
name: 'myac', width: 80, fixed: true, sortable: false,
resize: false, formatter: 'actions',
formatoptions: {
keys: true
}
}
],
برای اینکه دکمه‌های ویرایش و حذف ردیف‌های آن عمل کنند:
نیاز است تعاریف سایر ستون‌هایی را که باید قابلیت ویرایش داشته باشند، به نحو ذیل تغییر دهیم:
colModel: [
{
name: 'Id', index: 'Id', align: 'right', width: 70,
editable: false
},
{
name: 'Name', index: 'Name', align: 'right', width: 100,
editable: true, edittype: 'text',
editoptions: {
maxlength: 40
},
editrules: {
required: true
}
},
{
name: 'Supplier.Id', index: 'Supplier.Id', align: 'right', width: 110,
editable: true, edittype: 'select',
editoptions: {
dataUrl: '@Url.Action("SuppliersSelect","Home")'
},
editrules: {
required: true
}
},
{
name: 'Category.Id', index: 'Category.Id', align: 'right', width: 110,
editable: true, edittype: 'select',
editoptions: {
dataUrl: '@Url.Action("CategoriesSelect","Home")'
},
editrules: {
required: true
}
},
{
name: 'Price', index: 'Price', align: 'center', width: 100,
formatter: 'currency',
formatoptions:
{
decimalSeparator: '.',
thousandsSeparator: ',',
decimalPlaces: 2,
prefix: '$'
},
editable: true, edittype: 'text',
editrules: {
required: true,
number: true,
minValue: 0
}
},
{
name: 'myac', width: 80, fixed: true, sortable: false,
resize: false, formatter: 'actions',
formatoptions: {
keys: true
}
}
],
- در اینجا هر ستونی که دارای خاصیت editable مساوی true است، قابلیت ویرایش پیدا می‌کند.
- edittype آن بیانگر کنترلی است که باید حین ویرایش آن سلول خاص ظاهر شود. برای مثال اگر text باشد، یک text box و اگر مانند حالت Supplier.Id مساوی select تعریف شود، یک drop down را ظاهر خواهد کرد. برای مقدار دهی این drop down می‌توان editoptions و سپس dataUrl آن‌را مقدار دهی نمود.
public ActionResult SuppliersSelect()
{
var list = ProductDataSource.LatestProducts;
var suppliers = list.Select(x => new SelectListItem
{
Text = x.Supplier.CompanyName,
Value = x.Supplier.Id.ToString(CultureInfo.InvariantCulture)
}).ToList();
return PartialView("_SelectPartial", suppliers);
}
در مثال فوق، این dataUrl به اکشن متد SuppliersSelect اشاره می‌کند که نهایتا لیستی از تولید کننده‌ها را توسط partial view ذیل بازگشت می‌دهد:
@model IList<SelectListItem>
@Html.DropDownList("srch", Model)
در کل مقادیر قابل تنظیم در اینجا شامل text، textarea، select، checkbox، password، button، image، file و custom هستند.
- خاصیت editrules، برای مباحث اعتبارسنجی اطلاعات ورودی توسط کاربر پیش بینی شده‌است. برای مثال اگر required: true در آن تنظیم شود، کاربر مجبور به تکمیل این سلول خاص خواهد بود. در اینجا خواصی مانند number و integer از نوع bool، خاصیت‌های minValue و maxValue از نوع عددی، email, url, date, time از نوع bool و custom قابل تنظیم است (مثال‌های حالت custom را در منابع انتهای بحث می‌توانید مطالعه کنید).
- پس از اینکه مشخص شدند کدامیک از ستون‌ها باید قابلیت ویرایش داشته باشند، مسیری که باید اطلاعات نهایی را به سرور ارسال کند، توسط خاصیت editurl مشخص می‌شود:
$('#list').jqGrid({
caption: "آزمایش چهارم",
//url from wich data should be requested
url: '@Url.Action("GetProducts","Home")',
//url for edit operation
editurl: '@Url.Action("EditProduct","Home")',
اکشن متد متناظر با این آدرس یک چنین شکلی را می‌تواند داشته باشد:
[HttpPost]
public ActionResult EditProduct(Product postData)
{
//todo: Edit product based on postData
return Json(true);
}
- تعاریف مسیرهای ارسال اطلاعات Add و Delete، در قسمت تنظیمات navGrid باید ذکر شوند:
$('#list').navGrid(
'#pager',
//enabling buttons
{ add: true, del: true, edit: false, search: false },
//edit options
{},
//add options
{ width: 'auto', url: '@Url.Action("AddProduct","Home")' },
//delete options
{ url: '@Url.Action("DeleteProduct","Home")' }
);
امضای این اکشن متدها نیز بسیار شبیه به اکشن متد ویرایش است:
[HttpPost]
public ActionResult DeleteProduct(string id)
{
//todo: Delete product
return Json(true);
}
[HttpPost]
public ActionResult AddProduct(Product postData)
{
//todo: Add product to repository
return Json(true);
}
- حالت ویرایش و حذفی که تا اینجا بررسی شد (ستون actions)، جزو خواص توکار این گرید است. اگر بخواهیم آنها را دستی فعال کنیم (جهت اطلاعات عمومی) می‌توان از فراخوانی متد ذیل نیز کمک گرفت:
var lastSel;
function inlineEdit() {
$('input[name=rdEditApproach]').attr('disabled', true);
$('#list').navGrid(
'#pager',
//enabling buttons
{ add: true, del: true, edit: false, search: false },
//edit options
{},
//add options
{ width: 'auto', url: '@Url.Action("AddProduct","Home")' },
//delete options
{ url: '@Url.Action("DeleteProduct","Home")' }
);
//add onSelectRow event to support inline edit
$('#list').setGridParam({
onSelectRow: function (id) {
if (id && id != lastSel) {
//save changes in row
$('#list').saveRow(lastSel, false);
lastSel = id;
}
//trigger inline edit for row
$('#list').editRow(id, true);
}
});
};
در اینجا ابتدا همان تنظیمات مسیرهای Add و Delete انجام شده‌است. سپس با فراخوانی دستی متد editRow در زمان کلیک بر روی یک ردیف، همان کاری را که ستون actions در جهت فعال سازی خودکار حالت ویرایش سلول‌ها انجام می‌دهد، می‌توان شبیه سازی کرد. متد saveRow نیز کار ارسال اطلاعات تغییر کرده را به سرور انجام می‌دهد.
- برای فعال سازی خودکار فرم‌های افزودن رکوردها و یا ویرایش ردیف‌های موجود می‌توان از فراخوانی متد formEdit ذیل کمک گرفت:
function formEdit() {
$('input[name=rdEditApproach]').attr('disabled', true);
$('#list').navGrid(
'#pager',
//enabling buttons
{ add: true, del: true, edit: true, search: false },
//edit option
{
width: 'auto', checkOnUpdate: true, checkOnSubmit: true,
beforeShowForm: function (form) {
centerDialog(form, $('#list'));
}
},
//add options
{
width: 'auto', url: '@Url.Action("AddProduct","Home")',
reloadAfterSubmit: false, checkOnUpdate: true, checkOnSubmit: true,
beforeShowForm: function (form) {
centerDialog(form, $('#list'));
}
},
//delete options
{
url: '@Url.Action("DeleteProduct","Home")', reloadAfterSubmit: false
})
.jqGrid('navButtonAdd', "#pager", {
caption: "حذف ردیف‌های انتخابی", title: "Delete Toolbar", buttonicon: 'ui-icon ui-icon-trash',
onClickButton: function () {
var idsList = jQuery("#list").jqGrid('getGridParam', 'selarrrow');
alert(idsList);
//jQuery("#list").jqGrid('delGridRow',idsList,{reloadAfterSubmit:false});
}
});
};
function centerDialog(form, grid) {
var dlgDiv = $("#editmod" + grid[0].id);
var parentDiv = dlgDiv.parent(); // div#gbox_list
var dlgWidth = dlgDiv.width();
var parentWidth = parentDiv.width();
var dlgHeight = dlgDiv.height();
var parentHeight = parentDiv.height();
var parentTop = parentDiv.offset().top;
var parentLeft = parentDiv.offset().left;
dlgDiv[0].style.top = Math.round( parentTop + (parentHeight-dlgHeight)/2 ) + "px";
dlgDiv[0].style.left = Math.round( parentLeft + (parentWidth-dlgWidth )/2 ) + "px";
}
ابتدای تنظیمات آن، شاهد add: true, del: true, edit: true هستید. این مورد سبب می‌شود تا در فوتر گرید، سه دکمه‌ی افزودن، ویرایش و حذف ردیف‌ها ظاهر شوند:
با کلیک بر روی دکمه‌ی افزودن ردیف جدید، صفحه‌ی ذیل به صورت خودکار تولید می‌شود:
و با کلیک بر روی دکمه‌ی ویرایش ردیفی انتخاب شده، صفحه‌ی ویرایش آن ردیف به همراه مقادیر سلول‌های آن ظاهر خواهند شد:
تنظیمات قسمت‌های Add و Delete ویرایش توسط فرم‌ها، با حالت ویرایش داخل ردیفی آنچنان تفاوتی ندارد. فقط در اینجا پیش از نمایش فرم، از متد centerDialog برای نمایش صفحات افزودن و ویرایش رکوردها در وسط صفحه، استفاده شده‌است. توسط checkOnUpdate: true, checkOnSubmit: true سبب خواهیم شد تا اگر کاربر مقادیر موجود فرمی را تغییر داده‌است و سعی در بستن فرم، بدون ذخیره سازی اطلاعات کند، پیغام هشدار دهنده‌ای به او نمایش داده شود که آیا می‌خواهید تغییرات را ذخیره کنید یا خیر؟
- در انتهای متد formEdit، به کمک متد jqGrid و پارامتر navButtonAdd یک دکمه‌ی سفارشی را نیز اضافه کرده‌ایم. اگر به ستون پس از شماره‌های خودکار ردیف‌ها، در سمت راست گرید دقت کنید، یک سری chekbox قابل مشاهده هستند. برای فعال سازی خودکار آنها کافی است خاصیت multiselect گرید به true تنظیم شود. اکنون برای دسترسی به این ستون‌های انتخاب شده، می‌توان از متد jqGrid به همراه پارامترهای getGridParam و selarrrow استفاده کرد. خروجی آن، لیست idهای ستون‌ها است.
برای مطالعه بیشتر Common Editing Properties Inline Editing Form Editing Cell Editing
کدهای کامل این مثال را از اینجا می‌توانید دریافت کنید jqGrid04.zip
