WedX - журнал о программировании и компьютерных науках

jqGrid: как сделать поля только для чтения серыми в диалоговом окне добавления/редактирования формы?

Я использую jqGrid для обслуживания базы данных, и мне нужно, чтобы определенные поля читались только в диалоговом окне добавления/редактирования формы. Я вижу, что jqGrid поддерживает поля только для чтения в параметрах редактирования, но возможно ли, чтобы некоторые поля ввода были «серыми» только для чтения, чтобы была визуальная подсказка, позволяющая пользователю узнать, что поле доступно только для чтения и не редактируется?

Заранее спасибо.

ОБНОВЛЕНИЕ Спасибо за быстрый ответ, Олег! Я попробовал то, что вы опубликовали, но я получаю много предупреждений о коде в своей среде IDE (Netbeans). Вот мой код:

jQuery("#grid").jqGrid('navGrid','#grid_toppager', 
    {
         add:true,
         edit:true,
         view:true, 
         search:false, 
         del:false, 
         refresh:true
    },
    { // Edit form
         width:"auto",
         height:"auto",
         top:220,
         left:500,
         viewPagerButtons:false, //disables the arrows to next records
         topinfo:"Fields marked with (*) are required",
         resize:false,
         recreateForm: true,
         beforeShowForm: function ($form) {
             $form.find(".FormElement[readonly]")
                  .prop("disabled", true)
                  .addClass("ui-state-disabled")
                  .closest(".DataTD")
                  .prev(".CaptionTD")
                  .prop("disabled", true)
                  .addClass("ui-state-disabled")
    },  
    { // Add form
         width:"auto",
         height:"auto",
         top:220,
         left:500,
         topinfo:"Fields marked with (*) are required",
         resize:false,
         reloadAfterSubmit:true,
         closeAfterAdd: true
    },
    { // prmDel

    },

    { // prmSeach

    },

    { //prmView
         top:220,
         left:460
    }

); //jQuery("#grid").jqGrid('navGrid','#grid_toppager'

И можно ли изменить серый цвет на более темный оттенок? Мне нужно, чтобы пользователь по-прежнему мог читать его, но видеть и понимать визуальную подсказку о том, что его нельзя редактировать. Большое спасибо Олег

jqgrid
10.12.2013

Ответы:


1

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

В демо используется следующий код

$("#grid").jqGrid("navGrid", "#pager", {},
    {
        recreateForm: true,
        beforeShowForm: function ($form) {
            $form.find(".FormElement[readonly]")
                .prop("disabled", true)
                .addClass("ui-state-disabled")
                .closest(".DataTD")
                .prev(".CaptionTD")
                .prop("disabled", true)
                .addClass("ui-state-disabled");
        },
         // Add dialog options
    },
    {recreateForm: true}
);

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

введите здесь описание изображения

Вы можете использовать причину отсутствия установки свойства disabled в поле, и вы можете использовать другой класс как "ui-state-disabled", если вам нужно. В основном я хотел показать, как выбрать все поля, которые вы хотите сделать "серыми".

10.12.2013
  • @ klm10: В вашем коде отсутствует закрытие } в конце обратного вызова beforeShowForm. Так что у вас просто синтаксическая ошибка. Кроме того, лучше добавить ; в конце длинного оператора внутри beforeShowForm. 10.12.2013
  • Спасибо Олег, простите за простую программную ошибку. Теперь это работает с моей сеткой. Я очень ценю вашу помощь! Можно ли контролировать оттенок серого, который использует код? Мне нужно, чтобы он был более темного оттенка серого, чтобы он мог читать, но сохранял визуальную подсказку, что его нельзя редактировать. В очередной раз благодарим за помощь! 10.12.2013
  • @klm10: добро пожаловать! Я использовал класс ui-state-disabled, определение которого вы можете найти здесь. Он основан на opacity: .35; и filter:Alpha(Opacity=35);. Вы можете определить свой класс и использовать его вместо ui-state-disabled внутри beforeShowForm. Вам нужно просто изменить значение opacity. 10.12.2013
  • Спасибо!! Изменение непрозрачности сработало! У меня есть еще один вопрос относительно выделенных серым цветом полей: How do I get make a readonly field an editable field on the Add form? Сценарий: В форме Редактировать: укажите unit_id, short_desc, long_desc только для чтения (серый). В форме Добавить оставьте unit_id редактируемым (для целей добавления), но оставьте short_desc и long_desc только для чтения (серыми). Я нашел этот код: $("#unit_id",formid).attr("readonly","readonly");, но я не могу заставить его работать 11.12.2013
  • @klm10: Добро пожаловать! Есть много способов сделать это. Например, вы можете использовать beforeInitData обратный вызов редактирования формы (см. ответ). Другой способ — установить атрибут readonly (или удалить его) внутри beforeShowForm (см. ответ). Еще один ответ дает вам советы, как динамически обнаруживать диалоговое окно "Изменить" или "Добавить". Кстати, вы можете установить свойство readOnly или использовать jQuery.prop вместо attr 11.12.2013
  • @Олег, большое спасибо за ответ. Это сэкономило мне много времени. Но у меня есть проблема, по какой-то причине в моем случае только имя поля выделено серым цветом, но не значение, вы знаете, почему? 09.09.2015
  • @zhihong: Добро пожаловать! О проблеме с серым цветом только имя поля, но не значение. Вы должны опубликовать более подробную информацию (код JavaScript), что вы делаете. Очень важно знать, какую версию jqGrid вы используете. Кстати, я разрабатываю бесплатный jqGrid как ответвление jqGrid. Он имеет новую функцию, описанную в статье вики< /а>. Я рекомендую вам попробовать бесплатный jqGrid. Вы сможете использовать editable: "disabled" вместо editable: true. 09.09.2015
    • Новые материалы
    Как создать диаграмму градиентной кисти с помощью D3.js
    Резюме: Из этого туториала Вы узнаете, как добавить градиентную кисть к диаграмме с областями в D3.js. Мы добавим градиент к значениям SVG и применим градиент в качестве заливки к диаграмме с..
    Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что это выглядит сложно…
    Просто начните и учитесь самостоятельно Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что он кажется мне сложным, и я бросил его. Это в основном инструмент..
    Лицензии с открытым исходным кодом: руководство для разработчиков и создателей
    В динамичном мире разработки программного обеспечения открытый исходный код стал мощной парадигмой, способствующей сотрудничеству, инновациям и прогрессу, движимому сообществом. В основе..
    Объяснение документов 02: BERT
    BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..
    Как проанализировать работу вашего классификатора?
    Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..
    Работа с цепями Маркова, часть 4 (Машинное обучение)
    Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..
    Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
    Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..
    Для любых предложений по сайту: wedx@cp9.ru