Редактируемая сетка с jQuery, Bootstrap и Shield UI Lite

 <script src="shieldui-lite-all.min.js"></script>
<script src="shortGridData.js"></script>

Настройка сетки

Следующим шагом в этом процессе является настройка компонента сетки Shield UI Lite. После того, как мы включили необходимые ресурсы, мы можем инициализировать его с помощью некоторого JavaScript в обработчике document.ready.

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

Сетка Shield UI Lite имеет встроенное свойство dataSource Чтобы связать dataSourcedata

Код для достижения этого показан ниже:

 dataSource: {
  data: gridData,
  schema: {
    fields: {
      id: { path: "id", type: Number },
      age: { path: "age", type: Number },
      name: { path: "name", type: String },
      company: { path: "company", type: String },
      month: { path: "month", type: Date },
      isActive: { path: "isActive", type: Boolean },
      email: { path: "email", type: String },
      transport: { path: "transport", type: String }
    }
  }
}

Включение редактирования

Следующим шагом в процессе настройки приложения является выбор того, какие свойства будут доступны в сетке, а также описание столбцов, которые будут отображаться.

Каждый столбец может иметь дополнительные свойства, такие как текст заголовка и ширина. Настройка свойства width

Код для всех свойств в элементе управления приведен ниже:

 rowHover: false,
columns: [
  { field: "name", title: "Person Name", width: "120px" },
  { field: "age", title: "Age", width:"80px" },
  { field: "company", title: "Company Name" },
  { field: "month", title: "Date of Birth", 
  format: "{0:MM/dd/yyyy}", width:"120px" },
  { field: "isActive", title: "Active" },
  { field: "email", title: "Email Address", width: "250px" },
  { field: "transport", title: "Custom Editor", width: "120px", editor: myCustomEditor },
  {
    width: "104px",
    title: "Delete Column",
    buttons: [
      { cls: "deleteButton", commandName: "delete", 
        caption: "<img src='source/delete.png' />
        <span>Delete</span>" }
    ]
  }
],
editing: {
  enabled: true,
  event: "click",
  type: "cell",
  confirmation: {
    "delete": {
      enabled: true,
      template: function (item) {
        return "Delete row with ID = " + item.id
      }
    }
  }
},

Настройка пользовательского редактора

Виджет поддерживает множество удобных редакторов из коробки. После того, как элемент управления переведен в режим редактирования, щелкнув любую из ячеек, редактор ячейки будет зависеть от типа значений в этой ячейке. Например, числовое значение будет иметь числовой ввод с кнопками увеличения и уменьшения. Столбец даты будет иметь ввод календаря для удобного выбора даты.

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

Это может быть достигнуто путем присоединения к событию getCustomEditorValue

Это продемонстрировано в следующем фрагменте кода для событий:

 events: {
  getCustomEditorValue: function (e) {
    e.value = $("#dropdown").swidget().value();
    $("#dropdown").swidget().destroy();
  }
}

И пользовательский редактор:

 function myCustomEditor(cell, item) {
  $('<div id="dropdown"/>')
  .appendTo(cell)
  .shieldDropDown({
    dataSource: {
      data: ["motorbike", "car", "truck"]
    },
    value: !item["transport"] ? null : item["transport"].toString()
  }).swidget().focus();
}

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

На этом наша настройка завершена, и элемент управления готов к использованию.

Посмотреть полную рабочую демонстрацию на CodePen

Не забудьте щелкнуть внутри любой ячейки содержимого в таблице / сетке, чтобы увидеть, как работает функция редактирования. Вы можете посмотреть другие примеры использования jQuery Grid компонента Shield UI на веб-сайте Shield UI .