تغییرات مورد نیاز جهت فعال سازی ویرایش، حذف و افزودن رکوردهای 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 } } ],
- 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); }
@model IList<SelectListItem> @Html.DropDownList("srch", Model)
- خاصیت 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); }
$('#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); }
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); } }); };
- برای فعال سازی خودکار فرمهای افزودن رکوردها و یا ویرایش ردیفهای موجود میتوان از فراخوانی متد 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 و 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