Блог

Главная - Вопросы по программированию - Пользовательский интерфейс Kendo с jQuery изменит шаблон: только для чтения или отключения

Пользовательский интерфейс Kendo с jQuery изменит шаблон: только для чтения или отключения

#jquery #kendo-ui #kendo-grid

Вопрос:

   <td role="gridcell">input</td>
  <td role="gridcell">1</td>
  <td role="gridcell">
    <input class="remove1" type="button" value="▼" style="margin: 4px">
    <input id="Txt_test" class="txtBox" type="textbox" value="220" style="margin: 4px">
    <input class="Add1" type="button" value="▲" style="margin: 4px">   
    </td>
  <td style="display:none" role="gridcell">
  </td>
    
  </tr>
  <tr class="k-alt" role="row">
    <td role="gridcell">input</td>
    <td role="gridcell">2</td><td role="gridcell">
    <input class="remove1" type="button" value="▼" style="margin: 4px">
    <input id="Txt_test" class="txtBox" type="textbox" value="59" style="margin: 4px">
    <input class="Add1" type="button" value="▲" style="margin: 4px">
      
    </td>
    </tr>
      
    </tbody>

сверху был мой выложенный Html

Затем я использовал jQuery, чтобы изменить приведенный ниже код, чтобы отключить или только для чтения, но это не сработало!

 <input id="Txt_test" class="txtBox" type="textbox" value="220" style="margin: 4px">

Я примеряю пользовательский интерфейс kendo с помощью jQuery

 $("#Txt_test").attr('disabled', true);

и

 $("#Txt_test").prop('readonly', true);

и сменить класс

 $(".txtBox").attr('disabled', true);

У меня есть изменение типа ввода=»текст», та же ошибка для меня.
также я стараюсь

 var clearAddGrid = $("#AddGrid").data('kendoGrid');
clearAddGrid.editable = false;

Я хочу добиться того, что показано ниже

 if(status==0)
{
    Grid input can edit
}else{
    Grid input can't edit
}

а это мои ячейки сетки

 { field: "txtRealNum", title: "RealNum", width: "40px", template: '<input class="remove1" type="button" value="▼" style="margin: 1px" /><input  id="Txt_test" class="txtBox" type="textbox" value= #=txtRealNum# style="margin: 4px" /><input  class="Add1" type="button" value="▲" style="margin: 1px" />' },

моя сетка

     $("#AddGrid").kendoGrid({
        dataSource: AddGriddataSource,
        selectable: "row",
        scrollable: false,
        columns: AddGridCells,
        change: numberInput,
        pageable: {
            buttonCount: 3,
            messages: GridPageMsg
        },
        height: '100%',
        editable: true
    }).data("kendoGrid");

Комментарии:

1. пожалуйста, приведите пример здесь dojo.telerik.com/iBiZuGAc , клонируйте его и добавьте к своему вопросу, тогда я смогу вам помочь

2. @dev_in_progress привет, ты это имел в виду dojo.telerik.com/EZAYUkoN

Ответ №1:

Так ты хочешь отключить это?

 <input id="Txt_test" class="txtBox" type="textbox" value="220" style="margin: 4px">

Поскольку вы используете пользовательский интерфейс Kendo для jQuery, вы можете сделать это:

 $("#Txt_test").addClass("k-state-disabled");

Этого должно хватить.

Спасибо за пример в ДОДЗЕ Телерика. Если вы хотите отключить все input текстовые поля. Добавьте строку ниже после инициализации сетки кендо.

 $(".txtBox1").addClass("k-state-disabled");

Для вашего удобства:

 <!DOCTYPE html>
<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/grid/from-table">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.511/styles/kendo.default-v2.min.css" />

    <script src="https://kendo.cdn.telerik.com/2021.2.511/js/jquery.min.js"></script>
    
    
    <script src="https://kendo.cdn.telerik.com/2021.2.511/js/kendo.all.min.js"></script>
    
    

</head>
<body>
    <div id="AddGrid" style="height: 100%;" data-role="grid" class="k-grid k-widget">
      <table role="grid" data-role="selectable" class="k-selectable" style="height: auto;">          <colgroup>
        <col style="width:20px">
        <col style="width:20px">
        <col style="width:30px">
        <col style="width:30px">
        <col style="width:20px">
        </colgroup>
        <thead class="k-grid-header" role="rowgroup">
          <tr role="row">
            <th role="columnheader" data-field="txtRawNo" data-title="no" class="k-header">no</th><th role="columnheader" data-field="txtRawName" data-title="Name" class="k-header">name</th>
            <th role="columnheader" data-field="txtUnit" data-title="U" class="k-header">U</th>
            <th role="columnheader" data-field="txtBookNum" data-title="U" class="k-header">SNUM</th>
            <th role="columnheader" data-field="txtTranNum" data-title="NUM" class="k-header">NUM</th>
            <th role="columnheader" data-field="txtVersion" data-title="Version" style="display:none" class="k-header">Version</th>
          </tr>
        </thead>
        <tbody role="rowgroup"><tr data-uid="130d7d37-64f4-4f6e-98ca-fb2293e8d6ab" role="row">
          <td role="gridcell">11007109-2</td><td role="gridcell">SB 1kg*10</td>
          <td role="gridcell">1000g</td><td role="gridcell">818</td>
          <td role="gridcell"><input id="Del" class="Del1" type="button" value="▼" style="margin: 1px">
            <input id="Txt_test1" class="txtBox1" type="textbox" value="5" style="margin: 4px"><input id="plus" class="plus1" type="button" value="▲" style="margin: 1px">
          </td>
          <td style="display:none" role="gridcell">2021-06-02T15:08:00</td>
          </tr>
          <tr class="k-alt" data-uid="85651f08-df24-40b2-ae05-94123efb3125" role="row">
            <td role="gridcell">11094184</td><td role="gridcell">MS 1kg*10</td>
            <td role="gridcell">1000g</td>
            <td role="gridcell">801</td>
            <td role="gridcell">
              <input id="Del" class="Del1" type="button" value="▼" style="margin: 1px">
              <input id="Txt_test1" class="txtBox1" type="textbox" value="15" style="margin: 4px"><input id="plus" class="plus1" type="button" value="▲" style="margin: 1px"></td>
            <td style="display:none" role="gridcell">2021-06-03T11:24:00</td>
          </tr>
        </tbody>
      </table>
      <div class="k-pager-wrap k-grid-pager k-widget" data-role="pager">
        <a href="#" title="Go to the first page" class="k-link k-pager-nav k-pager-first k-state-disabled" data-page="1" tabindex="-1">
          <span class="k-icon k-i-seek-w">Go to the first page</span>
        </a><a href="#" title="Go to the previous page" class="k-link k-pager-nav k-state-disabled" data-page="1" tabindex="-1">
        <span class="k-icon k-i-arrow-w">Go to the previous page</span></a>
        <ul class="k-pager-numbers k-reset">
          <li><span class="k-state-selected">1</span></li></ul>
        <a href="#" title="Go to the next page" class="k-link k-pager-nav k-state-disabled" data-page="1" tabindex="-1">
          <span class="k-icon k-i-arrow-e">Go to the next page</span></a>
        <a href="#" title="Go to the last page" class="k-link k-pager-nav k-pager-last k-state-disabled" data-page="1" tabindex="-1">
          <span class="k-icon k-i-seek-e">Go to the last page</span></a>
        <span class="k-pager-info k-label">page1-2，total 2</span></div></div>
        </tbody>
    </table>

    <script>
        $(document).ready(function() {
            $("#grid").kendoGrid({
                selectable: "row",
                height: 550,
                sortable: true,
                editable: true
            });
          
            $(".txtBox1").addClass("k-state-disabled"); // comment/uncomment to see the outcome
        });    
     
    </script>
</div>

    

</body>
</html>

Комментарии:

1. Я тоже стараюсь $(".txtBox").addClass("k-state-disabled");

2. Но я нажимаю F12 и меняю класс, чтобы class="k-state-disabled" он работал

3. Я не понимаю, что вы пытаетесь сказать? Что именно вы хотите, чтобы произошло в отношении примера в ДОДЗЕ Телерика?

4. Извините ,что я идиот, потому что, когда я не получил сетку, я добавил это $(".txtBox").addClass("k-state-disabled"); , чтобы у меня не получилось …… затем я попробую еще раз, это сработает для меня

5. но если я изменю страницу, это приведет к аннулированию

Ответ №2:

Сделайте все входы с классом «txtBox» в качестве компонента kendo и отключите его

 $(".txtBox1").kendoTextBox({
       enable: false
});

На основе верхнего примера: Отключить входы

Комментарии:

1. Спасибо, что поделились ответами, я попробую

2. я не могу использовать эту функцию, я вижу, что мой проект использует Kendo UI v2014.2.903

3. привет @dev_in_progress в этом примере, какую версию пользовательского интерфейса kendo вы использовали

Ответ №3:

Вы должны изменить код на этот :

 $("#Txt_test").attr('disabled', 'disabled');
Метки: