Many resources are needed to download a project. Please understand that we have to compensate our server costs. Thank you in advance. Project price only 1 $
You can buy this project and download/modify it how often you want.
');
}
layui.form.render();
if (filter.type === 'checkbox' || filter.type === 'radio') {
var go = function (_this) {
if (that.searched) {
return false;
}
var name = _this.name;
if ($(_this).hasClass('radio-input')) {
$columnDown.find('li input[name=' + name + ']').not($(_this)).removeAttr('checked');
layui.form.render();
}
var ids = [];
$(_this).parents('.column-filter').find('input[name=' + name + ']').each(function () {
if (this.checked) {
var _val = $(this).val();
if (isNaN(_val)) {
ids.push(_val);
} else {
ids.push(parseFloat(_val));
}
}
});
var _filter = {
field: filter.field,
type: 'list',
value: ids
};
//单选多选
enterFilter(that, _filter, $otherTh);
};
$columnDown.find('li').on('click', function (e) {
if ($(e.target).hasClass('layui-icon') || $(e.currentTarget).hasClass('layui-icon')) {
return false;
}
$(this).find('input')[0].checked = !$(this).find('input')[0].checked;
layui.form.render();
go($(this).find('input')[0]);
});
layui.form.on('checkbox(' + that.urlId + ')', function (data) {
if ($(data.elem).hasClass('checkbox-input')) {
go(data.elem);
}
});
}
$columnDown.find('input[type*=text],input[type*=number]').keyup(function (e) {
if (e.keyCode === 13) {
// 字符, 数字
enterFilter(that, filter, $otherTh);
}
e.stopPropagation();
});
$columnDown.find('input[name*=grid-filter]').on('focus', function () {
input = this;
});
}
$(this).append($columnDown);
if (filter.type === 'date') {
laydate.render({
elem: '.body-item.active input[type*=Wdate]',
format: 'yyyy-MM-dd',
done: function () {
// 日期
enterFilter(that, filter, $otherTh);
}
});
}
layui.form.render();
getLocation(this, $columnDown);
}
});
}
,
/**
* 绑定分页事件
*/
bindPageEvent: function () {
var that = this;
var flag = false;
laypage.render({
elem: that.$this.find('.grid-page-elem')[0],
curr: that.$page.pageNo,
count: that.$page.total,
limit: that.$page.pageSize,
limits: [30, 100, 300, 800, 2000, 5000, 10000, 30000],
layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'],
jump: function (obj) {
if (!flag) {
flag = true;
return false;
}
if (obj.curr !== that.$page.pageNo) {
that.jumpPage(obj.curr, that.$page.totalPages);
} else if (obj.limit !== that.$page.pageSize) {
that.$page.pageSize = obj.limit;
that.jumpPage(1, that.$page.totalPages);
} else {
that.refresh();
}
}
});
}
,
/**
* 绑定 data-api 规则如下:
* data-grid-search : 绑定点击 data-grid-on : 指定绑定事件 data-grid-keydown: 绑定回车事件
* data-参数 : data-grid-search-form --> 指定搜索表单
* 其他 api: data-grid-refresh , 为按钮绑定刷新事件
*/
bindDataApiEvent: function () {
var that = this;
that.$wrapper.find('[data-grid-refresh]').click(function () {
that.refresh();
});
var submit = function (_this) {
var $that = $(_this);
var key = $that.data('grid-search-key') || $that.attr('name');
if (key) {
var val = $that.val() || that.$wrapper.find('[name=' + key + ']').val();
val = val || '';
var filter = $that[0].hasAttribute('data-grid-search-filter');
if (filter) {
that.loadWithFilter({
type: 'string',
field: key,
value: val
});
} else {
var other = {};
other[key] = val;
that.loadWithOther(other);
}
}
};
var submitForm = function (formName) {
if (formName) {
var form = that.$wrapper.find('form[name=' + formName + ']');
if (form && form.length > 0) {
that.loadWithOther(form.serializeArray().toModel());
}
}
};
var $gridOn = that.$wrapper.find('[data-grid-on]');
if ($gridOn.length > 0) {
$gridOn.each(function (index, item) {
var $item = $(item);
var event = $item.data('grid-on');
var formName = $item.data('grid-search-form');
$item.on(event, function () {
if (formName) {
submitForm(formName);
} else {
submit(this);
}
});
});
}
that.$wrapper.find('[data-grid-keydown]').on('keydown', function (e) {
if (e.keyCode === 13) {
var formName = $(this).data('grid-search-form');
if (formName) {
submitForm(formName);
} else {
submit(this);
}
}
});
that.$wrapper.find('[data-grid-search]').on('click', function () {
var $that = $(this);
var formName = $that.data('grid-search-form');
submitForm(formName);
});
},
sort: function (sort) {
var that = this;
if (sort.length > 0) {
var so = sort[0];
if (that.options.enableStaticSort || that.options.url === '') {
var field = so.field;
var dir = so.direction;
// asc desc default
var items = that.getStore();
that.$body.find('table tbody').empty();
items = items.sort(function (a, b) {
var b2 = b[field];
var a2 = a[field];
if (!isNaN(b2)) {
b2 = parseFloat(b2);
a2 = parseFloat(a2);
}
if (dir === 'desc') {
return a2 > b2 ? -1 : 1;
} else {
return a2 > b2 ? 1 : -1;
}
});
that.addRows(items);
layui.form.render();
that.initBodyEvent();
} else {
var nextDir = so.direction;
if (nextDir === 'default') {
sort = [];
}
var param = {
filter: that.$filter,
sort: sort
};
that.sorted = true;
that.$sort = sort;
that.loadBySubmit(param);
}
}
},
/**
* 绑定所有事件
*/
initEvent: function () {
var that = this;
var $tableBody = that.$this.find('.table_body');
if (that.options.enableSort) {
that.bindSortEvent();
}
if (that.options.enableFilter) {
that.bindFilterEvent();
}
if (that.options.dataApi) {
that.bindDataApiEvent();
}
that.$this.find('.table_body tr td input[type=checkbox]').on('click', function (e) {
e.stopPropagation();
});
that.$this.find('.table_head tr > th.td-check').on('click', function (e) {
var checked = $(this).find('input')[0].checked;
that.$this.find('table > tbody > tr > td.td-check input').each(function () {
this.checked = checked;
if (checked) {
$(this).parents('tr').addClass('grid-selected');
} else {
$(this).parents('tr').removeClass('grid-selected');
}
});
layui.form.render();
if (that.options.callback !== null) {
that.options.callback(false, false, that);
}
e.stopPropagation();
});
// that.$this.find('.table_head tr > th.td-check').on('click', function () {
// $(this).find('input').click();
// });
$tableBody.on('scroll', function (e) {
var scrollLeft = $tableBody.scrollLeft();
var headWidth = that.$this.find('.table_head').width();
var headScrollWidth = that.$this.find('.table_head')[0].scrollWidth;
that.$this.find('.table_head').scrollLeft(scrollLeft);
if (scrollLeft > headScrollWidth - headWidth) {
var a = scrollLeft - (headScrollWidth - headWidth);
var oldPadding = that.$this.find('.table_head thead th:last').find('.column-filter').css('padding-right');
that.$this.find('.table_head thead th:last').find('.column-filter').css('padding-right', (parseInt(oldPadding) + (a)) + 'px');
var w = that.$this.find('.table_head thead th:last').width();
that.$this.find('.table_head thead th:last').css({
width: w + a,
maxWidth: w + a,
minWidth: w + a
});
}
});
var headWidth = that.$this.find('.table_head').width();
var bodyTableWidth = $tableBody.find('table').width();
if (bodyTableWidth < headWidth) {
var a = headWidth - bodyTableWidth - 4;
var oldPadding = that.$this.find('.table_head thead th:last').find('.column-filter').css('padding-right');
that.$this.find('.table_head thead th:last').find('.column-filter').css('padding-right', (parseInt(oldPadding) + (a)) + 'px');
var w = parseInt(that.$this.find('.table_head thead th:last').data('width'));
that.$this.find('.table_head thead th:last').css({
width: w + a,
maxWidth: w + a,
minWidth: w + a
});
}
window.addEventListener('resize', function () {
that.setHeight(that.getModuleHeight() - that.options.height);
});
},
/**
* 绑定 tbody 行选中, 点击事件, 每次 load 重复调用
*/
initBodyEvent: function () {
var that = this;
that.$this.find('.table_body tr').on('click', function () {
if (that.options.multiSelect) {
var inputElement = $(this).find('td input')[0];
inputElement.checked = !(inputElement.checked);
layui.form.render();
if (inputElement.checked) {
$(this).addClass('grid-selected');
} else {
$(this).removeClass('grid-selected');
}
}
if (that.options.callback !== null) {
that.options.callback($(this), $(this).data(), that);
}
});
that.$this.find('.table_body tr').dblclick(function (e) {
if (e.target.nodeName === 'TD') {
if (that.options.doubleClick !== null) {
that.options.doubleClick($(this), $(this).data(), that, e);
}
}
});
that.$this.find('.table_body tr td.td-check').on('click', function (e) {
var checked = $(this).find('input')[0].checked;
if (checked) {
$(this).parents('tr').addClass('grid-selected');
} else {
$(this).parents('tr').removeClass('grid-selected');
}
if (that.options.callback !== null) {
that.options.callback(this, $(this).parents('tr').data(), that);
}
e.stopPropagation();
});
}
,
/**
* 入口
*/
init: function (_$this, _options) {
this.options = $.extend({}, this.getDefaultOption(), _options);
this.$sort = [];
this.$filter = [];
this.$other = {};
this.$page = {
pageNo: this.options.page.pageNo || 1,
pageSize: this.options.page.pageSize || 20
};
this.$this = _$this;
this.oldStore = [];
_$this.empty().append(this.html());
this.$head = _$this.find('.grid-wrapper>.grid-content>div.table_head');
this.$body = _$this.find('.grid-wrapper>.grid-content>div.table_body');
this.$head.append('
');
this.$body.append('
');
this.header();
this.body();
if (this.options.height) {
this.setHeight(this.getModuleHeight() - this.options.height);
}
var that = this;
this.load(that.getDefaultParam(), function (page) {
that.page(page);
that.initEvent();
});
}
,
/**
* 渲染 表格头部
*/
header: function () {
var checkTh = '';
if (this.options.multiSelect) {
checkTh = '
';
}
var $thead = $('
' + checkTh + '
');
var columns = this.options.columns;
for (var i = 0; i < columns.length; i++) {
var col = columns[i];
var width = col.width ? col.width : ROW_DEFAULT_WIDTH;
var colNameWidth = width - 30;
var sort = (this.options.enableSort && col.dataIndex && col.dataIndex !== '') ? ('') : '';
var filter = (this.options.enableFilter && col.dataIndex && col.dataIndex !== '') ? $('
') : '';
var $th = $(
'
\
' + (col.text || '') + ' \
' + sort + '\
\
');
$th.append(filter);
$th.find('.column-filter').data(col);
$th.css({
'width': width,
'min-width': width,
'max-width': width
});
if (col.align && col.align !== '') {
$th.css('text-align', col.align);
}
$th.find('.column-name').css({
'width': colNameWidth,
'min-width': colNameWidth,
'max-width': colNameWidth
});
$thead.find('tr').append($th);
}
this.$head.find('table').append($thead);
this.$body.find('table').append($thead.clone());
},
/**
* 渲染 表格行记录
*/
body: function () {
},
clearAll: function () {
this.$body.find('table tbody').empty();
},
addRow: function (record) {
var that = this;
that.$body.find('table tbody').append(that.renderRow(record));
},
addRows: function (record) {
var that = this;
for (var i = 0; i < record.length; i++) {
var row = record[i];
that.$body.find('table tbody').append(that.renderRow(row));
}
that.$this.find('.grid-page .static-count > span').html(record.length);
},
/**
* 渲染具体行
*/
renderRow: function (row) {
var checkTd = '';
if (this.options.multiSelect) {
checkTd = '
';
}
var $tr = $('
' + checkTd + '
');
$tr.data(row);
var columns = this.options.columns;
for (var i = 0; i < columns.length; i++) {
var col = columns[i];
var width = col.width ? col.width : ROW_DEFAULT_WIDTH;
var data = row[col.dataIndex];
if (data !== 0) {
data = data || ''
}
if (col.renderer) {
data = col.renderer(row[col.dataIndex], row, $tr, i, col);
}
var $td = $(
'
'
);
$td.append(data);
$td.css({
'width': width,
'min-width': width,
'max-width': width
});
if (col.css) {
$td.css(col.css)
}
if (col.align && col.align !== '') {
$td.css('text-align', col.align);
}
$tr.append($td);
}
return $tr;
},
/**
* ajax 加载数据
*/
load: function (_param, callback) {
if (!_param.other.clearAll) {
if (this.options.beforeLoad) {
this.options.beforeLoad(_param);
}
}
this.load0(_param, callback);
},
/**
* ajax 加载数据
*/
load0: function (_param, callback) {
var that = this;
if (!that.options.url || that.options.url === '') {
var $tbody = $('');
that.$body.find('table').append($tbody);
that.$head.find('table').append($tbody.clone());
that.$this.find('.grid-page').append('共计: 条');
that.initEvent();
return false;
}
var error0 = function (errMsg) {
if (errMsg) {
$.tip.error(errMsg);
} else {
if (callback) {
callback({total: 0});
}
}
that.sorted = false;
that.searched = false;
that.loaded = false;
that.$this.find('tbody').empty();
that.$this.find('.table_body').append(that.noData());
that.$this.find('.table_body table').show();
that.$this.find('.grid-loading').hide();
};
that.$this.find('.table_body').find('div.grid-not-data').remove();
that.$this.find('tbody').remove();
that.$this.find('.grid-loading').show();
request.ajax({
type: 'POST',
url: that.options.url,
async: that.options.async,
data: JSON.stringify(_param),
contentType: "application/json",
dataType: 'json',
success: function (res) {
if (res && typeof res === 'object') {
var page = res;
if (page && page.success && page.data && page.data.length > 0) {
var $tbody = $('');
for (var i = 0; i < page.data.length; i++) {
var getRandom = function (min, max) {
return parseInt(Math.random() * (max - min) + min);
};
var row = page.data[i];
row = $.extend({}, row, {'grid_random': getRandom(1, that.$page.pageSize * 3)});
$tbody.append(that.renderRow(row));
}
setTimeout(function () {
that.$body.find('table').append($tbody);
that.$head.find('table').append($tbody.clone());
if (callback) {
callback(page);
}
that.initBodyEvent();
that.sorted = false;
that.searched = false;
that.loaded = false;
that.$this.find('.table_body table').show();
that.$this.find('.grid-loading').hide();
layui.form.render();
if (that.options.afterLoad) {
that.options.afterLoad(that);
}
}, 200);
} else {
error0();
}
} else {
console.log(res);
error0('系统开小差了, 请稍后重试!');
}
}, error: function (err) {
console.log(err);
error0('网络错误, 请刷新后重试!');
}
})
},
/**
* 加载 page 分页
* @param total
*/
page: function (res) {
var total = res.total;
var pageNo = this.$page.pageNo;
var pageSize = this.$page.pageSize;
if (!total) {
total = res.data ? res.data.length : 0;
pageNo = 1;
pageSize = total;
}
var page = {
total: total,
pageNo: pageNo,
pageSize: pageSize
};
if (this.options.enablePage) {
var totalPages = (page.total % page.pageSize === 0) ? (page.total / page.pageSize) : (Math.floor(page.total / page.pageSize) + 1);
this.$page = page = $.extend(page, {
totalPages: totalPages,
hasPrePage: page.pageNo - 1 > 0,
hasNextPage: page.pageNo + 1 <= totalPages
});
this.$this.find('.grid-page').empty().append('');
this.bindPageEvent();
} else {
this.$this.find('.grid-page').remove();
}
},
/**
* html 代码结构
* @returns {string}
*/
html: function () {
return ('' +
'');
},
/**
* 无数据 HTML
*/
noData: function () {
return (
'
' +
' ' +
'
'
);
},
staticFilter: function (filter) {
if (filter) {
this.checkExistsFilter(filter.field, true);
this.$filter.push(filter);
}
var that = this;
var val = filter.value;
var field = filter.field;
var type = filter.type;
var hasInitOldStore = that.oldStore && that.oldStore.length > 0;
var items;
if (hasInitOldStore) {
items = that.oldStore;
} else {
items = that.getStore();
}
that.clearAll();
that.$this.find('.grid-loading').show();
setTimeout(function () {
var oldStores = [];
var recordItems = [];
for (var i = 0; i < items.length; i++) {
var item = items[i];
oldStores.push(item);
let itemFieldVal = item[field];
if (type === 'string') {
if (itemFieldVal && itemFieldVal !== '') {
if (itemFieldVal.toString().indexOf(val) !== -1) {
recordItems.push(item);
}
}
} else if (type === 'list') {
var flag = false;
if (!val || val.length === 0) {
flag = true;
}
for (var j = 0; j < val.length; j++) {
var choseV = val[j];
if (choseV == itemFieldVal.toString()) {
flag = true;
break;
}
}
if (flag) {
recordItems.push(item);
}
}
}
if (!hasInitOldStore) {
that.oldStore = oldStores;
}
that.searched = false;
that.addRows(recordItems);
layui.form.render();
that.initBodyEvent();
that.$this.find('.grid-loading').hide();
}, 200);
}
};
var input;
var enterFilter = function (that, filter, $th) {
var $tableHead = that.$this.find('.table_head');
$tableHead.find('thead th.column-th').removeClass('searching');
$th.addClass('searching');
if (input) {
$(input).parents('.column-down-menu').find('input[name*=grid-filter]').not(input).val('');
if (filter.type !== 'list') {
filter.value = $(input).val().trim();
}
}
if (that.searched) {
return false;
}
if (filter.type === 'numeric' || filter.type === 'date') {
filter.operator = $(input).data('operator');
}
that.searched = true;
if (that.options.enableStaticFilter) {
that.staticFilter(filter);
} else {
that.loadWithFilter(filter);
}
};
$.fn.grid = function (_options) {
var that = this;
return new Grid(that, _options);
};
exports('grid', Grid);
}).link(webConfig.rootDir + 'res/css/grid.css');
' +
''
);
},
staticFilter: function (filter) {
if (filter) {
this.checkExistsFilter(filter.field, true);
this.$filter.push(filter);
}
var that = this;
var val = filter.value;
var field = filter.field;
var type = filter.type;
var hasInitOldStore = that.oldStore && that.oldStore.length > 0;
var items;
if (hasInitOldStore) {
items = that.oldStore;
} else {
items = that.getStore();
}
that.clearAll();
that.$this.find('.grid-loading').show();
setTimeout(function () {
var oldStores = [];
var recordItems = [];
for (var i = 0; i < items.length; i++) {
var item = items[i];
oldStores.push(item);
let itemFieldVal = item[field];
if (type === 'string') {
if (itemFieldVal && itemFieldVal !== '') {
if (itemFieldVal.toString().indexOf(val) !== -1) {
recordItems.push(item);
}
}
} else if (type === 'list') {
var flag = false;
if (!val || val.length === 0) {
flag = true;
}
for (var j = 0; j < val.length; j++) {
var choseV = val[j];
if (choseV == itemFieldVal.toString()) {
flag = true;
break;
}
}
if (flag) {
recordItems.push(item);
}
}
}
if (!hasInitOldStore) {
that.oldStore = oldStores;
}
that.searched = false;
that.addRows(recordItems);
layui.form.render();
that.initBodyEvent();
that.$this.find('.grid-loading').hide();
}, 200);
}
};
var input;
var enterFilter = function (that, filter, $th) {
var $tableHead = that.$this.find('.table_head');
$tableHead.find('thead th.column-th').removeClass('searching');
$th.addClass('searching');
if (input) {
$(input).parents('.column-down-menu').find('input[name*=grid-filter]').not(input).val('');
if (filter.type !== 'list') {
filter.value = $(input).val().trim();
}
}
if (that.searched) {
return false;
}
if (filter.type === 'numeric' || filter.type === 'date') {
filter.operator = $(input).data('operator');
}
that.searched = true;
if (that.options.enableStaticFilter) {
that.staticFilter(filter);
} else {
that.loadWithFilter(filter);
}
};
$.fn.grid = function (_options) {
var that = this;
return new Grid(that, _options);
};
exports('grid', Grid);
}).link(webConfig.rootDir + 'res/css/grid.css');