فعال سازی Subgrid
در اینجا مواردی را که باید جهت فعال سازی subgrid به تعاریف اولیهی jqGrid اضافه کرد، مشاهده میکنید:
$('#list').jqGrid({ caption: "آزمایش یازدهم", // ... jsonReader: { // ... subgrid: { root: "Rows", repeatitems: true, cell: "RowCells" } }, // ... subGrid: true, subGridModel: [{ name: ['شرکت', 'آدرس', 'کد پستی', 'شهر', 'کشور', 'تلفن', 'وب سایت'], width: [100, 100, 100, 100, 100, 100, 100], align: ['center', 'center', 'center', 'center', 'center', 'center', 'center'], params: ['@(StronglyTyped.PropertyName<Product>(x=>x.Name))'] }], subGridOptions:{ reloadOnExpand : false //load only once }, subGridUrl: '@Url.Action("GetGetSupplierData", "Home")' });
با تنظیم subGrid: true نمایش ستون + داری که در تصویر فوق مشخص است، انجام میشود.
subGridModel بیانگر ساختار اطلاعاتی است که قرار است نمایش داده شوند.
آرایه name، نام سر ستونها را مشخص میکند.
آرایه width، عرض ستونهای زیرگرید را مقدار دهی خواهد کرد.
آرایه align محل و سمت قرارگیری هر یک از مقادیر سلولها را تعیین میکند.
آرایه params اختیاری است. زمانیکه کاربر بر روی یک + ستون subgrid، برای باز شدن این زیرگرید کلیک میکند، صرفا Id ردیف به سرور ارسال میشود. اگر در این بین میخواهید، خاصیت خاصی از گرید اصلی نیز به سرور ارسال شود، آرایه params را مقدار دهی کنید. برای نمونه در اینجا Name ردیف انتخاب شده نیز به ارسال ارسال خواهد شد (برگه شبکه شکل فوق).
subGridOptions یک سری تنظیمات اضافه را به همراه دارد. اگر میخواهید اطلاعات زیرگرید فقط یکبار بارگذاری شود و با هربار کلیک کاربر از سرور دریافت نگردد، خاصیت reloadOnExpand آنرا false کنید.
subGridUrlآدرسی که تامین کننده اطلاعات JSON زیرگرید میباشد.
در این حالت، کدهای سمت سرور بازگشت اطلاعات زیر گرید به شکل زیر میباشد:
public ActionResult GetGetSupplierData(int id, string name) { var list = ProductDataSource.LatestProducts; var products = list.Where(x => x.Id == id).ToList(); if (!products.Any()) return Json(null, JsonRequestBehavior.AllowGet); var productsData = new JqGridData { Rows = (products.Select(product => new JqGridRowData { Id = product.Id, RowCells = new List<string> { product.Supplier.CompanyName, product.Supplier.Address, product.Supplier.PostalCode, product.Supplier.City, product.Supplier.Country, product.Supplier.Phone, product.Supplier.HomePage } })).ToList() }; return Json(productsData, JsonRequestBehavior.AllowGet); }
کدهای کامل این مثال را از اینجا میتوانید دریافت کنید
jqGrid11.zip