更改 JTable 布局

目录

• 引言
• 问题
• 解决方案
• 扩展jTable功能
• 实现布局换行 

引言

本文是文章JTable Spring Hibernate Demo (https://codeproject.org.cn/Articles/1113148/JTable-Spring-Hibernate-Demo)的续篇。顾名思义，本文将介绍如何根据需要扩展jTable的功能。虽然jTable提供了广泛的功能，但有时可能需要扩展或添加功能。

问题

jTable提供了一种创建表单来添加或编辑记录的方法。虽然此功能非常有用且实现良好，但我个人由于屏幕尺寸问题遇到了一个问题。

“保存”和“取消”按钮无法完全显示。如果表单字段数量急剧增加和/或屏幕尺寸较小，则许多表单字段将与操作按钮一起隐藏。从而阻止用户输入和/或提交数据。

解决方案

可以将表单字段水平排列而不是垂直显示，以便容纳更多表单字段。这可以通过为jTable引入layoutBreak选项来实现，这样，如果为特定表单字段设置layoutBreak选项，则其后的其余表单字段将显示在下一列中。

下图显示了在Student.jsp中为“城市”和“关于”字段设置layoutBreak后的相同表单。现在所有字段和操作按钮都可见。

扩展jTable功能

完整解决方案可在jtable_form_extension.js中找到。jTable是一个小部件。每个小部件都有_create函数()。为了保持jTable的功能完整性，将jTable的_create函数()复制到变量base中。

var base = {
   _create : $.hik.jtable.prototype._create,
};

然后扩展_create函数()，并首先调用存储在变量base中的原始jTable创建函数。

$.extend(true, $.hik.jtable.prototype, {
   _create : function () {
      var self = this;
      // This will call the original method in jTable.
      base._create.apply(this, arguments);

对于jQuery小部件，self.options是一个包含小部件所有选项的键值对的哈希映射。jTable小部件选项包含表单字段。定义了一个布尔变量layoutBreakExists来检查任何表单字段的layoutBreak是否设置为true。如果是，则将layoutBreakExists设置为true，否则设置为false。这仅在设置layoutBreak时用于扩展jTable功能，否则原始jTable功能将继续运行。

self.options.base = {}; 
var layoutBreakExists = false;
// Checking if layoutBreak is true for any field.
// If it is then layoutBreak logic is called.
$.each(self.options.fields, function (fieldName, field) {
   if (field.layoutBreak) {
      layoutBreakExists = true;
   }
});

jTable有一个formCreated事件。为了保持原始jTable的功能，存储了事件函数。稍后，将覆盖formCreated函数()。在重写函数中，首先调用原始jTable函数，然后编写其余函数逻辑。如果layoutBreakExists为true，则调用layoutBreak逻辑。

self.options.base.formCreated = self.options.formCreated;
self.options.formCreated = function (event, data) {
   self.options.base.formCreated.apply(self, arguments);
   if (layoutBreakExists)
      formLayoutSetup.apply(self, arguments);// layoutBreak logic is called.

实现布局换行

需要检查每个表单字段，查看其任何layoutBreak属性是否设置为true。如果是，则应实现布局换行，并相应地绘制表单。表单字段的外观与jTable表单相同。因此，创建一个哈希映射，字段名称作为键，整个字段作为值。 

jTable中的每个表单字段都有类“jtable-input-field-container”。使用类名的.find()函数将返回具有该类的所有字段。在每个字段中，找到并存储类型为输入、选择或文本区域的表单字段。获取字段的name属性并将其用作哈希映射的键。相应的字段作为键的值存储。

function getFieldContainerMap($form) {
   // Obtaining hashmap
  var map = {};
   // finding fields from the form using the jTable classes defined to create the field.
  var fields = $form.find(".jtable-input-field-container");
   for (var i = 0; i < fields.length; i++) {
      var $field = $(fields[i]);     
     var $input = $field.find("input, select, textarea");
      if ($input.length > 0) {
         var fieldName = $input[0].name;
         map[fieldName] = $field;
      }
   }
   return map;
}

data.form提供jTable表单的表单数据。getFieldContainerMap()返回带有名称和字段的哈希映射。为了水平显示表单字段，创建了一个表格。 在表中创建一行。只要layoutBreak为false，就将字段垂直添加到该行的一个列中。如果layoutBreak为true，则创建新列，并将字段垂直添加到该列中，直到下一个layoutBreak为true。这样，表单的外观就变成了水平的。

function formLayoutSetup(event, data) {
   var self = this;
   var $form = data.form;
   var formType = data.formType;
   var $table = $('<table/>').appendTo($form);
   var $tr = $('<tr/>').appendTo($table);
   var $td = $('<td/>').attr({
         valign : 'top'
      }).appendTo($tr);
   var fieldContainerMap = getFieldContainerMap($form);
   $.each(fieldContainerMap, function (fieldName, $field) { 
      if (self.options.fields[fieldName].layoutBreak) {
         $td = $('<td/>').attr({
               valign : 'top'
            }).appendTo($tr);
      }
      $field.appendTo($td);
   });
}

源代码

代码可在以下地址获取：  https://github.com/pujagani/JTableSpringHibernateDemo