Добавление командного столбца в jqGrid в Asp.Net MVC - PullRequest
Новая
       16

Добавление командного столбца в jqGrid в Asp.Net MVC

3 голосов
/ 20 сентября 2010

Я надеюсь, что вы доброе утро.

Я бы хотел использовать jqGrid в своем приложении Asp.Net. До сих пор я производил html-таблицу и преобразовывал ее в сетку, но я хотел бы попробовать лучший подход: загрузка данных с помощью вызова AJAX, как это предполагается с помощью сетки. Я узнал, как получать данные, но я хотел бы иметь столбцы «Редактировать» и «Удалить» в дополнение к столбцам данных. Как мне этого добиться?

Я бы предпочел не создавать HTML для кнопок в моем контроллере. Идеальным решением было бы отправить только данные, и jqGrid добавил бы необходимые столбцы на основе некоторых шаблонов на стороне клиента и значений id. Я не могу сделать это вручную, так как не могу добавить столбцы в существующую сетку. Итак, что мне делать?

Обновление . Мне не нужно просто достичь функциональности редактирования / удаления. Что мне нужно, это добавить столбец с HTML на основе некоторого шаблона и значения «id», например <a href="MoreDetails/{id}">[More details]</a>

Ответы [ 2 ]

2 голосов
/ 14 октября 2010

Вы, наверное, уже поняли это, но для чего бы то ни было, вот мой ответ с использованием пользовательского форматера. Столбец «Действие» отображается с использованием специального средства форматирования, на котором показана кнопка, вызывающая простую функцию JavaScript. 

$(document).ready(function () {
        $("#all-errors-list").jqGrid({
            url: '/Error/AllErrors/',
            datatype: 'json',
            mtype: 'GET',
            colNames: ['Id', 'Error','Actions'],
            colModel: [
            { name: 'Id', index: 'Id', width: 100, align: 'left', editable: true},
            { name: 'ErrorDetails', index: 'ErrorDetails', width: 350, align: 'left' },
            { name: 'ActionId', width:400, formatter: actionFormatter}
                      ],
            pager: '#all-errors-pager',
            rowNum: 10,
            rowList: [10, 20, 50],
            sortname: 'Id',
            sortorder: 'asc',
            viewrecords: true,
            imgpath: '<%=Html.ImagePath()%>',
            caption: 'Open Errors',
            height: "100%",
            width: "100%",
            gridComplete: function () { $("button").button(); }
        })

    function actionFormatter(cellvalue, options, rowObject) {
        return "<button onclick=\"alert('" + cellvalue + "')\">Details</button>" ;
    }

Надеюсь, это поможет.

2 голосов
/ 20 сентября 2010

Отправка чистых данных с сервера является правильным способом, если вы используете jqGrid.

Чтобы реализовать редактирование строк, как вы хотите, посмотрите на jqGrid Demo и выберите в левой части «Редактирование строк», а затем «Пользовательское редактирование». Лично я предпочитаю использовать так называемое « встроенное редактирование » (выберите ту же демонстрацию «Типы ввода» в разделе «Редактирование строки»). Переключение в режиме редактирования осуществляется двойным щелчком мыши вместо выбора строки (см. jqGrid - в качестве примера редактируйте только определенные строки для редактируемого столбца ). Для удаления строк можно дополнительно использовать кнопку «Удалить» из « редактирования формы ». Чтобы использовать его, вы должны добавить Navigator в отношении метода navGrid и выбрать с соответствующими параметрами нужные вам кнопки на панели инструментов. Чтобы увидеть это в демонстрации, выберите «Манипулирование данными в реальном времени», а затем «Навигатор».

ОБНОВЛЕНО : В jqGrid Demo см. «Редактирование строки», а затем «Пользовательское редактирование», вы можете увидеть, как вы можете использовать setRowData внутри gridComplete или loadComplete дескриптор для установки ЛЮБОГО фрагмента HTML-кода. Почему вам не нравится метод? Вы также можете использовать предопределенный форматер showlink для отображения ссылки или использовать настраиваемый форматер и настраиваемый форматер для отображения любой HTML-код, содержащий в jqGrid клетка.

...