jTable提供了一种创建表单以添加或编辑记录的方式。虽然这个功能非常有用且实现得很好，但由于屏幕尺寸的限制，遇到了一个问题。当表单字段数量急剧增加，或者屏幕尺寸较小时，“保存”和“取消”按钮可能无法完全显示。这导致用户无法输入和/或提交数据。
为了解决这个问题，可以将表单字段水平排列，而不是垂直排列，以便容纳更多的表单字段。这可以通过向jTable引入一个layoutBreak选项来实现，如果为特定表单字段设置了layoutBreak选项，那么该字段之后的剩余字段将显示在下一列中。
下面的图片展示了在Student.jsp中为“City”和“About”字段设置layoutBreak时的表单。现在所有字段和操作按钮都可见了。
整个解决方案可以在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;
// 这将调用jTable中的原始方法
base._create.apply(this, arguments);
self.options.base = {};
var layoutBreakExists = false;
// 检查是否有任何字段设置了layoutBreak
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属性设置为true。如果是，则应该实现布局断点，并相应地绘制表单。表单字段的外观与jTable表单相同。因此，创建了一个名为fieldContainerMap的哈希映射，字段名称作为键，整个字段作为值。
function getFieldContainerMap($form) {
var map = {};
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;
}
function formLayoutSetup(event, data) {
var self = this;
var $form = data.form;
var formType = data.formType;
var $table = $('').appendTo($form);
var $tr = $('').appendTo($table);
var $td = $('').attr({ valign: 'top' }).appendTo($tr);
var fieldContainerMap = getFieldContainerMap($form);
$.each(fieldContainerMap, function(fieldName, $field) {
if (self.options.fields[fieldName].layoutBreak) {
$td = $('').attr({ valign: 'top' }).appendTo($tr);
}
$field.appendTo($td);
});
}