Я пытаюсь показать jqGrid, используя jquery 1.6.2.mins, и последний jqGrid - jqGrid 4.5.4.
Моя настройка проекта: ASP.NET - MVC2 с использованием Visual Studio 2010. Framework -.Net 4.0
Проблема. В моем классе С# я добавляю все строки из базы данных, которые я буду использовать в какой-то момент. Я просто хочу сначала отобразить две строки (NAME
, DESCRIPTION
).
JqGrid отображает две строки, но отображает мою строку id в первой, где она должна отображать то, что отображается столбец описания. Итак, в основном, что происходит, строки смещаются вправо, а моя колонка отображает, что она не работает. NAME = 'NAME_TXT'
, но по какой-то причине я получаю на дисплее NAME = ID
;
colNames: ['NAME', 'DESCRIPTION'],
colModel: [
{ name: 'NAME', index: 'NAME_TXT', align: 'left' },
{ name: 'DESCRIPTION', index: 'DESCRIPTION_TXT', align: 'left'}
],
Я также хотел бы знать, как я могу отобразить все, что данные JSON возвращаются из кода С#, как мне отобразить объект в console.log("JSON DATATYPE: " + $datatype)
, что-то вроде этого.
Спасибо.
Код JavaScript:
$(function () {
$grid = $("#grid");
$grid.jqGrid({
type: 'GET',
contentType: "application/json; charset=utf-8",
url: '/csc/devapp1/Home/LinqGridData/',
datatype: 'json',
colNames: ['NAME', 'DESCRIPTION'],
colModel: [
{ name: 'NAME', index: 'NAME_TXT', align: 'left' },
{ name: 'DESCRIPTION', index: 'DESCRIPTION_TXT', align: 'left'}],
sortname: 'NAME_TXT',
sortorder: "desc",
repeatitems: false,
viewrecords: true,
height: '500px',
autowidth: true});
});
Код С#:
public ActionResult LinqGridData(string sidx, string sord, int page, int rows)
{
var context = new CSCEntities();
var jsonData = new
{
total = 1,
page = page,
records = context.tbl_Quickfix_Toolbar.Count(),
rows = context.tbl_Quickfix_Toolbar.AsEnumerable().Select(n =>
new { n.QUICKFIX_ID,
cell = new string[] {
n.QUICKFIX_ID.ToString(),
n.NAME_TXT.ToString(),
n.DESCRIPTION_TXT.ToString(),
n.INSTRUCTIONS_TXT.ToString(),
n.TYPE_TXT.ToString(),
n.FIXLINK_TXT.ToString()}
}).ToArray()
};
return Json(jsonData, JsonRequestBehavior.AllowGet);
}
Другой код С#, который я пробовал в прошлом, который не работал:
public ActionResult GridData(string sidx, string sord, int page, int rows)
{
CSCEntities entities = new CSCEntities();
int pageIndex = Convert.ToInt32(page) - 1;
int pageSize = rows;
int totalRecords = entities.tbl_Quickfix_Toolbar.Count();
int totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);
var jsonData = new {
total = totalPages,
page = page,
records = totalRecords,
rows = (
from entity in entities.tbl_Quickfix_Toolbar
select new {
id = entity.QUICKFIX_ID,
cell = new string[] {
entity.NAME_TXT.ToString(),
entity.DESCRIPTION_TXT.ToString(),
entity.QUICKFIX_ID.ToString(),
entity.INSTRUCTIONS_TXT.ToString() }
}).ToArray()
};
return Json(jsonData, JsonRequestBehavior.AllowGet);
}
Код, который вы опубликовали, имеет множество проблем как на стороне клиента, так и на стороне сервера. Я остановлюсь только на некоторых проблемах.
Основная проблема заключается в том, что вы используете серверный код. Вы используете в настоящее время код сервера
...
new { n.QUICKFIX_ID,
cell = new string[] {
n.QUICKFIX_ID.ToString(),
n.NAME_TXT.ToString(),
n.DESCRIPTION_TXT.ToString(),
n.INSTRUCTIONS_TXT.ToString(),
n.TYPE_TXT.ToString(),
n.FIXLINK_TXT.ToString()}
}
...
который, похоже, должен быть изменен на
...
new {
id = n.QUICKFIX_ID,
cell = new [] {
n.NAME_TXT.ToString(),
n.DESCRIPTION_TXT.ToString()
}
}
...
Вы должны дополнительно рассмотреть возможность удаления .AsEnumerable()
или для перемещения его после select
.
Прежде всего свойство index
имеет лишь некоторое значение при сортировке на стороне сервера. Код сервера, который вы опубликовали, не использует параметры sidx
и sord
. Поэтому вы должны удалить все свойства index
из colModel
. Если указанное свойство index
jqGrid использует то же значение для index
как свойство name
значения. Это то, что нужно в 99% сценариев. Поэтому я рекомендую вам указать свойство index
. Поскольку вы используете формат массива элементов (cell = new string[] {...}
выбор свойства name
является бесплатным. Вы можете использовать name: 'NAME_TXT'
же, как name: 'NAME'
. столбцы в базе данных: NAME_TXT
и DESCRIPTION_TXT
Я лично предпочел бы использовать те же значения для name
.
Значение по умолчанию для свойства align
уже 'left'
. Поэтому лучше удалить ненужное align: 'left'
свойство align: 'left'
из colModel
. Значение '500px'
для параметра height
неверно. Правильными значениями являются строка "auto"
или строка "100%"
или любое целое значение, например height: 500
. Мне лично нравится использовать height: "auto"
.
В jqGrid нет опции contentType
. Если вам нужно указать contentType
HTTP-запроса, вы должны {ajaxGridOptions: { contentType: "application/json; charset=utf-8" }
использовать {ajaxGridOptions: { contentType: "application/json; charset=utf-8" }
. Опция repeatitems
не существует, и ее нужно удалить. С другой стороны, я бы рекомендовал вам добавить еще два варианта в jqGrid: gridview: true
и autoencode: true
.
Еще один очень важный параметр - rowNum
. Значение по умолчанию - 20
. Значение будет отправлено на сервер в качестве значения параметра rows
(см. Параметры LinqGridData
). Сервер должен возвращать только rows
элементов данных, отсортированных по sidx
. Если сервер возвращает больше как элементы rows
(более 20 элементов), jqGrid все равно будет отображать только первые rows
(только первые 20 элементов). Обычно сетка имеет панель пейджера внизу или вверху сетки. Таким образом, пользователь может перейти на другую страницу. В настоящее время вы не используете ни page
ни опцию toppager
. В результате сетка будет содержать до 20 строк, и пользователь не будет иметь возможности использовать пейджинг для просмотра остальных данных. Я рекомендую использовать toppager: true
pager
или toppager: true
или, по крайней мере, вы должны включить параметр rowNum: 10000
для отображения до 10000 строк, возвращаемых с сервера.
Если вы не выполнили пейджинг на стороне сервера, сортировку и фильтрацию данных, вы можете вернуть все данные в jqGrid, но используйте loadonce: true
вариант jqGrid. В случае, когда все данные будут сохранены локально, datatype
будет изменен на "local"
после первой загрузки с сервера, и пользователь сможет сортировать данные локально или использовать подкачку, не требуя, чтобы вы записывали дополнительный код. Это очень практичный вариант, если данные, которые вам нужно отображать (tbl_Quickfix_Toolbar
), не слишком велики.