Редактирование формы jqgrid: добавление поля в форму - PullRequest
Новая
       23

Редактирование формы jqgrid: добавление поля в форму

0 голосов
/ 17 января 2012

Я использую jqGrid пару месяцев, и я очень рад это сделать:)

Я успешно использую jqGrid в веб-приложении ASP.NET, все работает правильно. Я решил использовать редактирование форм jqGrid, потому что у сущностей есть много свойств, с которыми мне приходится иметь дело. Я понимаю, что если colModel содержит 5 столбцов, они появляются в модальной диалоговой форме (действие редактирования), если свойства имеют editable: true. Кроме того, я могу установить, что 4 свойства видимы, а последнее скрыто (даже если оно может отображаться в форме, установив edithidden: true).

Есть ли способ установить 4 свойства в colModel, но во всплывающей модальной форме есть одно, два или более полей?

EDIT:

Пожалуйста, посмотрите на этот код: 

ajaxSelectOptions: { type: "POST", contentType: "application/json; charset=utf-8", },
colNames: [
        'ID', 'Code', 'Number',  'Floor (nr.)', 'Descr', 'Type', 
        'Create by', 'Creation date', 
        'Status', 'Features'],
colModel: [
        { name: 'ID', index: 'id', width: 10, align: "center", search: false, sorttype: 'int', searchoptions: { sopt: ['eq', 'ne', 'cn'] }, editable: false, editoptions: { readonly: true} },
        { name: 'Code', index: 'Code', width: 20, align: "center", sorttype: 'text', searchoptions: { sopt: ['eq', 'ne', 'cn'] }, editable: false, editoptions: { readonly: true} },
        { 
        name: 'Number', 
        index: 'Number', 
        width: 20, 
        align: "center", 
        sorttype: 'int', 
        searchoptions: { sopt: ['eq', 'ne', 'cn'] }, 
        editable: true, 
        editoptions: { size : 20 },
        editrules: { required: true }
        },
        {
        name: 'Floor',
        index: 'Floor',
        width: 30,
        align: "center",
        sorttype: 'int',
        search: false,
        edittype: 'select',
        editable: true,
        editoptions: {
            dataUrl: '<%# ResolveUrl("~/path/to/myCSharpWebService") %>',
            buildSelect: function (data) {
            var retValue = $.parseJSON(data);
            var response = $.parseJSON(retValue.d);

            var s = '<select id="myid" name="myid">';

            if (response && response.length) {
                for (var i = 0, l = response.length; i < l; i++) {
                s += '<option value="' + response[i]["Id"] + '">' + response[i]["Descrizione"] + '</option>';
                }
            }

            return s + "</select>";
            }
        },
        editrules: { required: true }
        },
        { name: 'Descr', index: 'Descr', width: 40, align: "center", sorttype: 'text', editable: true, editoptions: { size: 10} },
        { 
        name: 'Type', 
        index: 'Type', 
        width: 50, 
        align: "center", 
        sorttype: 'text', 
        edittype: 'select',
        editable: true,
        editoptions: {
            dataUrl: '<%# ResolveUrl("~/path/to/myCSharpWebService") %>',
            buildSelect: function (data) {
            var retValue = $.parseJSON(data);
            var response = $.parseJSON(retValue.d);

            var s = '<select id="myid2" name="myid2">';

            if (response && response.length) {
                for (var i = 0, l = response.length; i < l; i++) {
                s += '<option value="' + response[i]["Id"] + '">' + response[i]["Descrizione"] + '</option>';
                }
            }

            return s + "</select>";
            }
        },
        editrules: { required: true }
        },
        { name: 'CreatedBy', index: 'CreatedBy', align: "center", search: false, sorttype: 'text', width: 40, searchoptions: { sopt: ['eq', 'ne', 'cn'] }, editable: false, editoptions: { readonly: true} },
        { name: 'CreationDate', index: 'CreationDate', align: "center", search: false, sorttype: 'text', width: 30, searchoptions: { sopt: ['eq', 'ne', 'cn'] }, editable: false, editoptions: { readonly: true} },
        { 
        name: 'Status',
        index: 'Status', 
        width: 50, 
        hidden: true, 
        edittype: 'select',
        editable: true, 
        editrules: { edithidden: true, required: true }, 
        editoptions: {
            dataUrl: '<%# ResolveUrl("~/path/to/myCSharpWebService") %>',
            buildSelect: function (data) {
            var retValue = $.parseJSON(data);
            var response = $.parseJSON(retValue.d);

            var s = '<select id="myid3" name="myid3">';

            if (response && response.length) {
                for (var i = 0, l = response.length; i < l; i++) {
                s += '<option value="' + response[i]["Id"] + '">' + response[i]["Descrizione"] + '</option>';
                }
            }

            return s + "</select>";
            }
        }
        },
        { 
        name: 'Features',
        index: 'Features', 
        width: 50, 
        hidden: true, 
        edittype: 'select',
        editable: true, 
        editrules: { edithidden: true, required: true }, 
        editoptions: {
            dataUrl: '<%# ResolveUrl("~/path/to/myCSharpWebService") %>',
            buildSelect: function (data) {
            var retValue = $.parseJSON(data);
            var response = $.parseJSON(retValue.d);

            var s = '<select id="myid4" name="myid4">';

            if (response && response.length) {
                for (var i = 0, l = response.length; i < l; i++) {
                s += '<option value="' + response[i]["Id"] + '">' + response[i]["Descrizione"] + '</option>';
                }
            }

            return s + "</select>";
            }
        }
        }
      ],

это фрагмент функции, которую я использую для создания сетки на моей странице aspx. Как вы можете видеть из colModel, существует 10 протоколов, но только 7 из них показаны jqGrid; Мне нужны другие, потому что я хочу показать их в модальной всплывающей форме, когда я редактирую запись в сетке.

Теперь я хотел бы записать более понятный код: я бы предпочел добавить эти 3 дополнительных поля при нажатии кнопки редактирования при создании всплывающего окна вместо перечисления их в colModel

1 Ответ

1 голос
/ 17 января 2012

Если я правильно понимаю ваш вопрос, вы сможете реализовать свои требования, динамически устанавливая атрибуты readonly='readonly' или disabled='disabled' в beforeShowForm обратном вызове формы редактирования.

Для общего понимания важноЗнайте, что когда jqGrid создает форму редактирования, он также помещает все скрытые поля в форму.Это упрощает отправку скрытых полей на сервер при отправке формы.Таким образом, вы можете иметь в скрытых столбцах таблицы любую информацию, которую вы планируете показывать в форме редактирования.Внутри вашей реализации обратного вызова beforeShowForm вы можете динамически показывать скрытые поля, но при необходимости устанавливать атрибуты «только для чтения».Например, 'ID', 'Code', 'CreatedBy' и 'CreationDate' из вашей сетки могут быть показаны следующим образом.

Вы можете дополнительно использовать средство выбора столбцов , чтобы скрыть столбцыизначально, но позвольте пользователю отображать дополнительную информацию, если она действительно необходима.Вы можете найти здесь пример использования средства выбора столбцов.

Несколько более общих рекомендаций для вашего кода.Я бы порекомендовал вам использовать так называемые шаблоны столбцов в вашей сетке и поделиться кодом buildSelect, который вы используете.

Например, если вы используете align: "center" в большинствестолбцы сетки вы можете использовать опцию cmTemplate: {align: "center"} jqGrid и удалить align: "center" из каждого столбца.Вы также можете определить некоторые шаблоны, которые вы используете везде во всех ваших сетках, как template параметр colModel.В ответе вы найдете пример одного простого myDateTemplate форматера.В случае использования datepicker в столбцах шаблон будет более сложным, но совместное использование кода будет еще более важным.См. демо с ответ или демо с другой ответ .

...