tfp
Version:
A Web UI framework for TaskBuilder
1,477 lines (1,253 loc) • 55.9 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _controller = require("../controller.js");
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
/**
* 数据表格组件
* @param {[type]} dataModel [description]
*/
var Grid = /*#__PURE__*/function (_VisibleComponent) {
(0, _inherits2["default"])(Grid, _VisibleComponent);
var _super = _createSuper(Grid);
function Grid(__tfp, dataModel, parent) {
var _this;
(0, _classCallCheck2["default"])(this, Grid);
_this = _super.call(this, __tfp, "Grid", dataModel, parent);
_this.curPage = 1;
_this.pageCount = 0;
_this.rowsCount = 0;
_this.dataList = [];
_this.orders = [];
return _this;
}
/******************* 数据绑定设置 *******************/
(0, _createClass2["default"])(Grid, [{
key: "loadDataService",
get: function get() {
return this.dataModel.loadDataService;
},
set: function set(value) {
this.dataModel.loadDataService = value;
}
}, {
key: "dataBindingMember",
get: function get() {
return this.dataModel.dataBindingMember;
},
set: function set(value) {
this.dataModel.dataBindingMember = value;
}
}, {
key: "dataBindingKey",
get: function get() {
return this.dataModel.dataBindingKey;
},
set: function set(value) {
this.dataModel.dataBindingKey = value;
}
}, {
key: "delDataService",
get: function get() {
return this.dataModel.delDataService;
},
set: function set(value) {
this.dataModel.delDataService = value;
}
/******************* 表头设置 *******************/
}, {
key: "showHeader",
get: function get() {
return this.dataModel.showHeader ? true : false;
},
set: function set(value) {
this.dataModel.showHeader = value ? true : false;
if (this._jqObj) {
this.reRender();
}
}
}, {
key: "headerBold",
get: function get() {
if (this.dataModel.headerBold == undefined || this.dataModel.headerBold == null) return true;
return this.dataModel.headerBold ? true : false;
},
set: function set(value) {
this.dataModel.headerBold = value ? true : false;
if (this._jqObj) {
if (this.dataModel.headerBold) {
this._jqObj.children(".tfp-grid-header").children("div").css("font-weight", "bold");
} else {
this._jqObj.children(".tfp-grid-header").children("div").css("font-weight", "normal");
}
}
}
}, {
key: "headerBgColor",
get: function get() {
return this.dataModel.headerBgColor ? this.dataModel.headerBgColor : "#F0F0F0";
},
set: function set(value) {
this.dataModel.headerBgColor = value;
if (this._jqObj) {
this._jqObj.children(".tfp-grid-header").css("background-color", value);
this._jqObj.children(".tfp-grid-header").children("div").css("background-color", value);
}
}
}, {
key: "headerTextColor",
get: function get() {
return this.dataModel.headerTextColor ? this.dataModel.headerTextColor : "#333333";
},
set: function set(value) {
this.dataModel.headerTextColor = value;
if (this._jqObj) {
this._jqObj.children(".tfp-grid-header").children("div").css("color", value);
}
}
}, {
key: "headerHeight",
get: function get() {
return this.dataModel.headerHeight ? this.dataModel.headerHeight : 40;
},
set: function set(value) {
if (!value) return;
var height = parseInt((value + "").replace("px", ""));
this.dataModel.headerHeight = height;
if (this._jqObj) {
this._jqObj.children(".tfp-grid-header").css("height", height + "px");
this._jqObj.children(".tfp-grid-header").children("div").css("height", height + "px");
this.resetDataListPosition();
}
}
/******************* 表体设置 *******************/
}, {
key: "showRowNum",
get: function get() {
return this.dataModel.showRowNum ? true : false;
},
set: function set(value) {
this.dataModel.showRowNum = value ? true : false;
this.reRender();
}
}, {
key: "showBorder",
get: function get() {
return this.dataModel.showBorder ? true : false;
},
set: function set(value) {
this.dataModel.showBorder = value ? true : false;
this.reRender();
}
}, {
key: "showCheckbox",
get: function get() {
return this.dataModel.showCheckbox ? true : false;
},
set: function set(value) {
this.dataModel.showCheckbox = value ? true : false;
this.reRender();
}
}, {
key: "borderColor",
get: function get() {
return this.dataModel.borderColor ? this.dataModel.borderColor : "#999999";
},
set: function set(value) {
this.dataModel.borderColor = value;
this.reRender();
}
}, {
key: "singleColor",
get: function get() {
return this.dataModel.singleColor;
},
set: function set(value) {
this.dataModel.singleColor = value;
if (this._jqObj) {
var that = this;
this._jqObj.children(".tfp-grid-datalist").children("div").each(function (index) {
if (index % 2 == 0) {
var color = "";
if (value) color = value;
$(this).css("background-color", color);
$(this).children("div").css("background-color", color);
}
});
}
}
}, {
key: "doubleColor",
get: function get() {
return this.dataModel.doubleColor;
},
set: function set(value) {
this.dataModel.doubleColor = value;
if (this._jqObj) {
var that = this;
this._jqObj.children(".tfp-grid-datalist").children("div").each(function (index) {
if (index % 2 == 1) {
var color = "";
if (value) color = value;
$(this).css("background-color", color);
$(this).children("div").css("background-color", color);
}
});
}
}
}, {
key: "rowHeight",
get: function get() {
return this.dataModel.rowHeight;
},
set: function set(value) {
this.dataModel.rowHeight = value;
if (this._jqObj) {
var rowHeight = value + "";
if (!rowHeight) rowHeight = "40";
if (rowHeight.indexOf("px") > 0) rowHeight = rowHeight.replace("px", "");
var divDataList = this._jqObj.children(".tfp-grid-datalist");
divDataList.children("div").css("height", rowHeight + "px");
divDataList.children("div").children("div").css("height", rowHeight + "px");
}
}
/******************* 表尾设置 *******************/
}, {
key: "showSumer",
get: function get() {
return this.dataModel.showSumer;
},
set: function set(value) {
this.dataModel.showSumer = value ? true : false;
if (this._jqObj) {
this.resetFooter();
}
}
}, {
key: "allowPaging",
get: function get() {
return this.dataModel.allowPaging ? true : false;
},
set: function set(value) {
this.dataModel.allowPaging = value ? true : false;
if (this._jqObj) {
this.resetFooter();
}
}
}, {
key: "pageSize",
get: function get() {
return this.dataModel.pageSize;
},
set: function set(value) {
this.dataModel.pageSize = value;
}
}, {
key: "columns",
get: function get() {
var columns = this.dataModel.columns;
if (!columns) {
columns = [];
if (this._tfp.isDesigning) {
//不能直接修改this.columns，以免保存到tfp文件中
columns = [{
name: "列标题1",
width: "100px",
align: "center"
}, {
name: "列标题2",
width: "100px",
align: "center"
}];
}
}
return columns;
},
set: function set(value) {
this.dataModel.columns = value;
if (this._jqObj) {
this.reRender();
}
}
}, {
key: "header",
get: function get() {
return this._jqObj.children(".tfp-grid-header");
},
set: function set(value) {//
}
}, {
key: "body",
get: function get() {
return this._jqObj.children(".tfp-grid-datalist");
},
set: function set(value) {//
}
}, {
key: "sumer",
get: function get() {
return this._jqObj.children(".tfp-grid-sumer");
},
set: function set(value) {//
}
}, {
key: "footer",
get: function get() {
return this._jqObj.children(".tfp-grid-footer");
},
set: function set(value) {//
}
}, {
key: "resetFooter",
value: function resetFooter() {
var divSumer = this._jqObj.children(".tfp-grid-sumer");
if (divSumer.length > 0) divSumer.remove();
var divFooter = this._jqObj.children(".tfp-grid-footer");
if (divFooter.length > 0) divFooter.remove();
if (this.showSumer) this._jqObj.append(this.getSumerHtml());
if (this.allowPaging) this._jqObj.append(this.getFooterHtml());
this.resetDataListPosition();
}
}, {
key: "reRender",
value: function reRender() {
this._jqObj.empty();
var Render = this._tfp.renders[this.type];
if (Render) {
var render = new Render(this._tfp, this.dataModel, this.level);
this._jqObj.html(render.getBodyHtml(false));
}
this.initDesigning();
}
}, {
key: "getHeaderHtml",
value: function getHeaderHtml() {
var indent = this.getHtmlIndent();
var htmlHeader = indent + "\t<div class=\"tfp-grid-header\" style=\"" + "background-color:" + this.headerBgColor + ";border: 1px solid " + this.borderColor + ";height:" + this.headerHeight + ";\">\r\n";
var heightStyle = "height:" + (this.headerHeight - 2) + "px;";
this.rowWith = 0;
var headerStyle = "";
if (this.headerTextColor) headerStyle += "color:" + this.headerTextColor + ";";
if (this.headerBold) headerStyle += "font-weight:bold;";
if (this.dataModel.showCheckbox) {
this.rowWith += 30;
htmlHeader += indent + "\t\t\t\t<div class=\"tfp-grid-header-checkbox\" " + "style=\"flex-basis: 30px;background-color:" + this.headerBgColor + ";" + heightStyle;
if (this.showBorder) {
htmlHeader += "border-right:1px solid " + this.borderColor + ";";
this.rowWith++;
}
htmlHeader += "\"><input type=\"checkbox\" onclick=\"" + this.dataModel.id + ".checkAll(this)\" /></div>\r\n";
}
if (this.dataModel.showRowNum) {
this.rowWith += 50;
htmlHeader += indent + "\t\t\t\t<div class=\"tfp-grid-header-index\" " + " style=\"flex-basis: 50px;background-color:" + this.headerBgColor + ";" + heightStyle + headerStyle;
if (this.showBorder) {
htmlHeader += "border-right:1px solid " + this.borderColor + ";";
this.rowWith++;
}
htmlHeader += "\">序号</div>\r\n";
}
var havePercentWidth = false;
for (var i = 0; i < this.columns.length; i++) {
var col = this.columns[i];
htmlHeader += indent + "\t\t\t\t<div";
var style = headerStyle;
if (i < this.columns.length - 1 && this.showBorder) {
style += "border-right:1px solid " + this.borderColor + ";";
this.rowWith++;
}
var colWidth = this.getColWidth(col.width);
if (colWidth.indexOf("px") < 0 && colWidth.indexOf("%") < 0) colWidth += "px";
htmlHeader += " style=\"flex-basis: " + colWidth + ";background-color:" + this.headerBgColor + ";" + heightStyle + style; //if (colWidth.indexOf("%") > 0) {
// havePercentWidth = true;
//} else {
//TODO 列宽暂不支持百分比的精确计算，只是简单的把%替换掉了
// this.rowWith += parseInt(colWidth.replace("px", "").replace("%", ""));
//}
//htmlHeader += " align=\"" + (col.headerAlign ? col.headerAlign : "center") + "\"";
htmlHeader += "\"";
htmlHeader += ">" + col.name;
/*if (col.allowOrder && col.order) {
htmlHeader += `<span class="order name_${col.order}" >`;
if (!col.orderType || col.orderType == 'asc') htmlHeader += `<img class="order-up" src="${this._tfp.rootPath}/src/components/grid/images/icon-up-blue.png"/>
<img class="order-down" src="${this._tfp.rootPath}/src/components/grid/images/icon-down-black.png" onclick=\"tfp.get('${this.dataModel.id}').orderBy('${col.order}','desc')" />`;
if (col.orderType == 'desc') htmlHeader += `<img class="order-up" src="${this._tfp.rootPath}/src/components/grid/images/icon-up-black.png" onclick=\"tfp.get('${this.dataModel.id}').orderBy('${col.order}','asc')" />
<img class="order-down" src="${this._tfp.rootPath}/src/components/grid/images/icon-down-blue.png"/>`
htmlHeader += '</span>';
}*/
htmlHeader += "</div>\r\n";
}
if (!this._tfp.isDesigning) htmlHeader += indent + "\t\t\t\t<div style=\"background-color:" + this.headerBgColor + ";" + heightStyle + "\"></div>";
htmlHeader += indent + "\t\t\t</div>\r\n";
return htmlHeader;
}
/**
* 获得列宽
* @param {[type]} width [description]
* @return {[type]} [description]
*/
}, {
key: "getColWidth",
value: function getColWidth(width) {
if (!width || width == "px") return "80";
return (width + "").replace("px", "");
}
}, {
key: "resetDataListPosition",
value: function resetDataListPosition() {
var divDataList = this._jqObj.children(".tfp-grid-datalist");
if (this.dataModel.showHeader) {
divDataList.css("top", this.headerHeight - 1 + "px");
} else {
divDataList.css("top", "0");
}
var dataListBottom = 0;
if (this.dataModel.showSumer) dataListBottom += 39;
if (this.dataModel.allowPaging) dataListBottom += 49;
divDataList.css("bottom", dataListBottom + "px");
}
}, {
key: "getRowTemplate",
value:
/**
* 获得行模板
* @return {[type]} [description]
*/
function getRowTemplate() {
if (!this.columns) return;
var indent = this.getHtmlIndent();
var html = "";
html += indent + "\t\t\t<div class=\"tfp-grid-datarow\"";
var rowHeight = this.dataModel.rowHeight ? this.dataModel.rowHeight + "" : "40";
rowHeight = rowHeight.replace("px", "");
html += " style=\"height:" + rowHeight + ";\"";
html += ">\r\n";
if (this.dataModel.showCheckbox) {
html += "\t\t\t\t<div class=\"tfp-grid-datarow-checkbox\" " + "style=\"flex-basis:30px;height:" + rowHeight + "px;border-bottom:1px solid " + this.borderColor + ";";
if (this.showBorder) html += "border-right:1px solid " + this.borderColor + ";";
html += "\"><input type=\"checkbox\"";
if (this.dataModel.dataBindingKey) {
if (this.dataModel.dataBindingKey.indexOf(",") < 0) {
html += " value=\"{" + this.dataModel.dataBindingKey + "}\"";
} else {
var keys = this.dataModel.dataBindingKey.split(",");
var keyVal = "";
for (var i = 0; i < keys.length; i++) {
if (i > 0) keyVal += "_";
keyVal += "{" + keys[i] + "}";
}
html += " value=\"" + keyVal + "\"";
}
}
html += " /></div>";
} //如果显示行号
if (this.dataModel.showRowNum) {
html += indent + "\t\t\t\t<div class=\"tfp-grid-datarow-index\" " + "style=\"flex-basis:50px;height:" + rowHeight + "px;border-bottom:1px solid " + this.borderColor + ";";
if (this.showBorder) html += "border-right:1px solid " + this.borderColor + ";";
html += "\"></div>\r\n";
}
for (var i = 0; i < this.columns.length; i++) {
var col = this.columns[i];
html += indent + "\t\t\t\t<div";
if (col["class"]) html += " class=\"".concat(col["class"], "\"");
var cellFormat = col.format;
var colStyle = "border-bottom:1px solid " + this.borderColor + ";";
if (col.bgColor) {
if (col.contentType == "button") {
//如果按钮设置了专门的按钮背景色，则bgColor就用来设置单元格背景色，否则bgColor用来设置按钮的背景色
if (col.buttonBgColor) colStyle += "background-color:" + col.bgColor + ";";
} else {
colStyle += "background-color:" + col.bgColor + ";";
}
}
var colWidth = this.getColWidth(col.width);
if (colWidth.indexOf("px") < 0 && colWidth.indexOf("%") < 0) colWidth += "px";
colStyle += "flex-basis:" + colWidth + ";height:" + rowHeight + "px;";
if (col.align == "left") {
colStyle += "justify-content: flex-start;text-align: left;";
} else if (col.align == "right") {
colStyle += "justify-content: flex-end;text-align: right;";
}
if (col.valign == "top") {
colStyle += "align-items: flex-start;";
} else if (col.valign == "bottom") {
colStyle += "align-items: flex-end;";
}
if (i < this.columns.length - 1 && this.showBorder) colStyle += "border-right:1px solid " + this.borderColor + ";";
if (col.style) colStyle += col.style;
if (!col.contentType || col.contentType == "text") {
if (col.color) colStyle += "color:" + col.color + ";";
if (col.bold) colStyle += "font-weight: bold;";
if (col.fontSize) colStyle += "font-size: " + col.fontSize + "px;";
if (col.onClick) colStyle += "cursor: pointer;";
if (col.nowrap) colStyle += "overflow: hidden;white-space: nowrap;text-overflow: ellipsis;";
if (colStyle != "") html += " style=\"" + colStyle + "\"";
if (col.onClick) html += " onclick=\"" + col.onClick + "\"";
html += ">";
if (cellFormat && col.dataFormat) {
if (col.dataFormat == "int") {
cellFormat = "#[parseInt(" + cellFormat + ")]";
} else if (col.dataFormat == "decimal") {
if (col.decimalLength || col.decimalLength == 0) {
cellFormat = "#[tfp.formatDecimal(" + cellFormat + ", '" + col.decimalCalcReg + "', " + col.decimalLength + ")]";
} else {
cellFormat = "#[parseFloat(" + cellFormat + ")]";
}
} else if (col.dataFormat == "money|0.00") {
cellFormat = "#[tfp.formatMoney(" + cellFormat + ", 2)]";
} else if (col.dataFormat == "money|0,000.00") {
cellFormat = "#[tfp.formatMoney(" + cellFormat + ", 2, true)]";
} else if (col.dataFormat.startsWith("date|") || col.dataFormat.startsWith("time|") || col.dataFormat.startsWith("datetime|")) {
cellFormat = "#[(new Date('" + cellFormat + "')).format('" + col.dataFormat.substr(col.dataFormat.indexOf("|") + 1) + "')]";
}
}
html += cellFormat || cellFormat == 0 ? cellFormat : "";
} else {
html += " style=\"" + colStyle + "\">\r\n";
html += indent + "\t\t\t\t";
if (col.contentType == "link") {
var linkStyle = "";
if (col.linkFontColor) linkStyle += "color:" + col.linkFontColor + ";";
if (col.linkFontBold) linkStyle += "font-weight: bold;";
if (col.linkFontSize) linkStyle += "font-size: " + col.linkFontSize + "px;";
if (col.onClick) linkStyle += "cursor: pointer;";
if (linkStyle != "") linkStyle = " style=\"" + linkStyle + "\"";
if (col.linkUrl) {
if (col.linkType == "page") {
//新页面
html += "<a href=\"javascript:tfp.openPage('".concat(col.targetTitle, "', '").concat(col.linkUrl, "')\" ").concat(linkStyle, ">").concat(col.format, "</a>");
} else if (col.linkType == "dialog") {
//对话框
html += "<a href=\"javascript:tfp.openDialog('".concat(col.targetTitle, "', '").concat(col.linkUrl, "', '").concat(col.dialogWidth, "px', '").concat(col.dialogHeight, "px')\" ").concat(linkStyle, ">\n ").concat(col.format, "\n </a>");
} else if (col.linkType == "window") {
//新窗口
html += "<a href=\"javascript:window.open('".concat(col.linkUrl, "', '").concat(col.targetTitle, "') \" ").concat(linkStyle, ">").concat(col.format, "</a>");
} else {
//当前页面
html += "<a href=\"".concat(col.linkUrl, "\" ").concat(linkStyle, ">").concat(col.format, "</a>");
}
} else if (col.onClick) {
html += "<a href=\"javascript:" + col.onClick + "\" " + linkStyle + ">" + col.format + "</a>";
} else {
html += "<a " + linkStyle + ">" + col.format + "</a>";
}
} else if (col.contentType == "button") {
html += "<div class=\"tfp-grid-cell-btn\" style=\"";
var textColor = col.buttonFontColor ? col.buttonFontColor : "#FFFFFF";
html += "color:" + textColor + ";";
var bgColor = col.buttonBgColor; //如果按钮没有设置专门的按钮背景色，但设置了单元格bgColor，则用这个单元格bgColor设置按钮的背景色
if (!bgColor && col.bgColor) bgColor = col.bgColor;
if (!bgColor) bgColor = "#006699";
html += "background-color:" + bgColor + ";";
if (col.buttonFontBold) html += "font-weight: bold;";
if (col.buttonFontSize) html += "font-size: " + col.buttonFontSize + "px;";
if (col.buttonTheme == "round") {
html += "border-radius: 4px;";
} else if (col.buttonTheme == "ellipse") {
html += "border-radius: 12px;";
}
html += "\"";
html += " onclick=\"" + col.onClick + "\"";
html += "\">";
if (cellFormat) html += cellFormat;
html += "</div>";
} else if (col.contentType == "image") {
html += "<img style=\"";
if (col.onClick) html += "cursor: pointer;";
if (col.imgWidth) {
var imgWidth = col.imgWidth;
if (imgWidth.indexOf("px") < 0 && imgWidth.indexOf("%") < 0) imgWidth += "px";
html += "width:" + imgWidth + ";";
}
if (col.imgHeight) {
var imgHeight = col.imgHeight;
if (imgHeight.indexOf("px") < 0 && imgHeight.indexOf("%") < 0) imgHeight += "px";
html += "height:" + imgHeight + ";";
}
var imgSrc = this._tfp.rootPath + "/src/components/image/images/default-photo.png";
if (cellFormat) imgSrc = cellFormat;
html += "\" src=\"" + imgSrc + "\"";
html += " onclick=\"" + col.onClick + "\"";
html += "/>";
} else if (col.contentType == "switch") {
html += "<div class=\"tfp-grid-cell-switch\"";
html += " onclick=\"" + col.onClick + "\"";
html += ">";
var _bgColor = "#999999";
var divFloat = "left";
if (cellFormat && cellFormat.indexOf("{") == 0 && col.selectedValue) {
divFloat = "#[('" + cellFormat + "')=='" + col.selectedValue + "' ? 'right' : 'left']";
var selectedBgColor = "#0099ff"; //if (col.bgColor) selectedBgColor = col.bgColor;
_bgColor = "#[('" + cellFormat + "')=='" + col.selectedValue + "' ? '" + selectedBgColor + "' : '#999999']";
}
html += "<div class=\"tfp-grid-cell-switch-btn\" style=\"float: " + divFloat + "; background-color:" + _bgColor + ";\"></div></div>";
} else if (col.contentType == "progress") {
html += "<div class=\"tfp-grid-cell-progress\">";
var _bgColor2 = "#0099ff"; //if (col.bgColor) bgColor = col.bgColor;
html += "<div class=\"tfp-grid-cell-progress-bar\" style=\"background-color:" + _bgColor2 + ";\"></div></div>";
}
html += "\r\n" + indent + "\t\t\t";
}
html += "</div>\r\n";
}
if (!this._tfp.isDesigning) html += "<div style=\"height:" + rowHeight + "px;border-bottom:1px solid " + this.borderColor + ";\"></div>";
html += indent + "\t\t</div>\r\n";
return html;
}
}, {
key: "getSumerHtml",
value: function getSumerHtml() {
if (!this.showSumer) return "";
var indent = this.getHtmlIndent();
var html = indent + "\t<div class=\"tfp-grid-sumer\" style=\"height:40px;" + "border:1px solid " + this.borderColor + ";bottom:" + (this.allowPaging ? "49px" : "0") + ";\">\r\n";
if (this.dataModel.showCheckbox) {
html += indent + "\t\t<div style=\"border-right:1px solid #FFFFFF;flex-basis:30px;\"></div>";
}
if (this.dataModel.showRowNum) {
html += indent + "\t\t<div class=\"tfp-grid-datarow-index\" " + "style=\"border-right:1px solid #FFFFFF;flex-basis:50px;\"></div>";
}
for (var i = 0; i < this.columns.length; i++) {
var col = this.columns[i];
html += indent + "\t\t<div";
var colWidth = this.getColWidth(col.width);
var style = "flex-basis:" + colWidth + "px;";
if (i == 0) {
style += "font-weight:bold;";
} else {
if (col.align != "center") style += "text-center: " + col.align + ";";
}
if (i < this.columns.length - 1 && this.showBorder) style += "border-right:1px solid #FFFFFF;";
if (style) html += " style=\"" + style + "\"";
html += ">";
if (i == 0) html += "合计";
html += "</div>\r\n";
}
if (!this._tfp.isDesigning) html += indent + "\t\t<div style=\"" + "flex-grow: 1;flex-shrink: 1; flex-basis:auto;\"></div>";
html += indent + "\t</div>";
return html;
}
}, {
key: "getFooterHtml",
value: function getFooterHtml() {
if (!this.allowPaging) return "";
var indent = this.getHtmlIndent();
var html = indent + "\t\t<div class=\"tfp-grid-footer\" style=\"border:1px solid " + this.borderColor + ";\">\r\n" + indent + "\t\t\t<div class=\"tfp-grid-btn-first\">首页</div> \r\n" + indent + "\t\t\t<div class=\"tfp-grid-btn-prev\">上一页</div> \r\n" + indent + "\t\t\t<div class=\"tfp-grid-btn-next\">下一页</div> \r\n" + indent + "\t\t\t<div class=\"tfp-grid-btn-last\">尾页</div> \r\n" + indent + "\t\t\t第 <span class=\"tfp-grid-curpage\">0</span> 页/共 \r\n" + indent + "\t\t\t<span class=\"tfp-grid-pagecount\">0</span> 页,\r\n" + indent + "\t\t\t<span class=\"tfp-grid-rowcount\">0</span> 条记录 \r\n";
html += indent + "\t\t\t<select>\r\n";
var pageSizeOptions = [20, 30, 50, 100];
for (var i = 0; i < pageSizeOptions.length; i++) {
var pageSize = pageSizeOptions[i];
html += indent + "\t\t\t\t<option value=\"" + pageSize + "\"";
if (this.pageSize == pageSize + "") html += " selected";
html += ">" + pageSize + "</option>\r\n";
}
html += indent + "\t\t\t</select>\r\n";
html += indent + "\t</div>";
return html;
}
/**
* 添加行
* @param {[type]} rowData [description]
*/
}, {
key: "addRow",
value: function addRow(rowData) {
var that = this;
if (!this.rowTemplate) {
this.rowTemplate = this.getRowTemplate();
}
var divDataList = this._jqObj.children(".tfp-grid-datalist");
var rowIndex = divDataList.children("div").length;
rowData._rowIndex = rowIndex;
rowData._rowNum = ((this.curPage ? this.curPage : 1) - 1) * this.pageSize + rowIndex + 1;
if (this.dataModel.onBeforeAddDataRow) {
try {
eval(this.dataModel.onBeforeAddDataRow);
} catch (e) {
console.log(e);
}
}
var rowHtml = "";
try {
rowHtml = this._tfp.replaceDataField(rowData, this.rowTemplate);
rowHtml = this._tfp.exeExpress(rowHtml);
} catch (e) {
console.log(e);
} //console.log(rowHtml);
var newRow = $(rowHtml);
for (var i = 0; i < this.columns.length; i++) {
var col = this.columns[i];
var celElIndex = i;
if (this.dataModel.showCheckbox) celElIndex++;
if (this.dataModel.showRowNum) celElIndex++;
var cellDiv = newRow.children().eq(celElIndex);
var haveSetBgColor = false; //如果设置了内容显示条件，则进行判断
if (col.displayConditions && col.displayConditions.length > 0) {
var haveMatch = false;
for (var j = 0; j < col.displayConditions.length; j++) {
var condition = col.displayConditions[j];
var conditionExpress = this._tfp.replaceDataField(rowData, condition.condition);
var conditionRet = false;
try {
conditionRet = eval(conditionExpress);
} catch (e) {
console.log(e);
}
if (conditionRet) {
var cellHtml = "";
if (condition.content) {
try {
cellHtml = this._tfp.replaceDataField(rowData, condition.content);
cellHtml = this._tfp.exeExpress(cellHtml);
} catch (e) {
console.log(e);
}
}
if (col.type == "button") {
cellDiv.children("div").html(cellHtml);
if (condition.fontColor) cellDiv.children("div").css("color", condition.fontColor);
if (condition.bgColor) {
cellDiv.children("div").css("background-color", condition.bgColor);
}
if (condition.bold) cellDiv.children("div").css("font-weight", "bold");
} else if (col.type == "link") {
cellDiv.children("a").html(cellHtml);
if (condition.fontColor) cellDiv.children("a").css("color", condition.fontColor);
if (condition.bgColor) {
cellDiv.css("background-color", condition.bgColor);
haveSetBgColor = true;
}
if (condition.bold) cellDiv.children("a").css("font-weight", "bold");
} else if (col.type == "image") {
cellDiv.children("img").attr("src", cellHtml);
} else {
cellDiv.html(cellHtml);
if (condition.fontColor) cellDiv.css("color", condition.fontColor);
if (condition.bgColor) {
cellDiv.css("background-color", condition.bgColor);
haveSetBgColor = true;
}
if (condition.bold) cellDiv.css("font-weight", "bold");
}
haveMatch = true;
break;
}
}
if (!haveMatch && col.notDisplayOnNoCondition) {
cellDiv.html("");
}
} else if (!isNull(col.displayCondition)) {
//TODO 这个参数在最新版的里面已经没有了
var _condition = this._tfp.replaceDataField(rowData, col.displayCondition);
var _conditionRet = false;
try {
_conditionRet = eval(_condition);
} catch (e) {
console.log(e);
}
if (!_conditionRet) cellDiv.html("");
} //如果设置了最大长度
if (col.maxLength && (!col.contentType || col.contentType == "text")) {
var content = cellDiv.html();
if (content.length > col.maxLength) cellDiv.html(content.substr(0, col.maxLength) + "...");
} //设置进度条
if (col.contentType == "progress" && col.format) {
var progress = 0;
try {
progress = this._tfp.replaceDataField(rowData, col.format);
progress = this._tfp.exeExpress(progress);
progress = parseInt(progress);
if (progress < 0) progress = 0;
if (progress > 100) progress = 100;
} catch (e) {
console.log(e);
}
if (progress > 0) {
var progressDiv = cellDiv.children().children();
progressDiv.css("width", progress + "px");
progressDiv.html(progress + "%");
}
} //如果设置了onClick事件，但单元格内容为空，则移除onClick事件
if (col.onClick && cellDiv.html() == "") cellDiv.removeAttr("onClick"); //如果当前列没有设置背景颜色
if (col.bgColor || haveSetBgColor) {
cellDiv.attr("data-set-bg-color", "true");
}
}
divDataList.append(newRow); //设置行序号
if (this.showRowNum) {
var colRowNum = newRow.children("div").get(0);
if (this.showCheckbox) colRowNum = newRow.children("div").get(1);
colRowNum.innerHTML = rowData._rowNum;
} //设置单双行背景颜色
this.setRowBgColor(rowIndex);
var curRow = divDataList.children("div").last();
curRow.mouseover(function () {
$(this).css("background-color", "#F0F0F0");
$(this).children("div").each(function () {
if ($(this).attr("data-set-bg-color")) return;
$(this).css("background-color", "#F0F0F0");
});
if (that.dataModel.onRowMouseOver) {
try {
eval(that.dataModel.onRowMouseOver);
} catch (err) {
console.log(err.message);
}
}
});
curRow.mouseout(function () {
that.setRowBgColor($(this).index());
if (that.dataModel.onRowMouseOut) {
try {
eval(that.dataModel.onRowMouseOut);
} catch (err) {
console.log(err.message);
}
}
});
if (this.dataModel.onCellBindData || this.dataModel.onCellClick || this.dataModel.onCellDblClick) {
curRow.children("div").each(function (index) {
var colIndex = index;
if (that.showCheckbox) colIndex++; //如果设置了单元格点击事件
if (that.dataModel.onCellClick) {
$(this).click(function () {
try {
eval(that.dataModel.onCellClick);
} catch (err) {
console.log(err.message);
}
});
} //如果设置了单元格双击事件
if (that.dataModel.onCellDblClick) {
$(this).dblclick(function () {
try {
eval(that.dataModel.onCellDblClick);
} catch (err) {
console.log(err.message);
}
});
} //如果设置了单元格数据绑定事件
if (that.dataModel.onCellBindData) {
try {
var val = eval(that.dataModel.onCellBindData);
if (val || val == 0) $(this).html(val);
} catch (err) {
console.log(err.message);
}
}
});
}
if (this.dataModel.onAfterAddDataRow) {
try {
eval(this.dataModel.onAfterAddDataRow);
} catch (e) {
console.log(e);
}
}
}
}, {
key: "setRowBgColor",
value: function setRowBgColor(rowIndex) {
var curRow = this._jqObj.children(".tfp-grid-datalist").children("div").eq(rowIndex); //设置单双行背景颜色
if (rowIndex % 2 == 1) {
if (this.dataModel.doubleColor) {
curRow.css("background-color", this.dataModel.doubleColor);
} else {
curRow.css("background-color", "#FFFFFF");
}
} else {
if (this.dataModel.singleColor) {
curRow.css("background-color", this.dataModel.singleColor);
} else {
curRow.css("background-color", "#FFFFFF");
}
}
var that = this;
curRow.children("div").each(function () {
if ($(this).attr("data-set-bg-color")) return;
if (rowIndex % 2 == 1) {
if (that.dataModel.doubleColor) {
$(this).css("background-color", that.dataModel.doubleColor);
} else {
$(this).css("background-color", "#FFFFFF");
}
} else {
if (that.dataModel.singleColor) {
$(this).css("background-color", that.dataModel.singleColor);
} else {
$(this).css("background-color", "#FFFFFF");
}
}
});
}
/**
* 获得指定索引的行
* @param {[type]} rowIndex [description]
* @return {[type]} [description]
*/
}, {
key: "getRow",
value: function getRow(rowIndex) {
var divDataList = this._jqObj.children(".tfp-grid-datalist");
return divDataList.children("div").eq(rowIndex);
}
/**
* 获得指定单元格
* @param {[type]} rowIndex [description]
* @param {[type]} colIndex [description]
* @return {[type]} [description]
*/
}, {
key: "getCell",
value: function getCell(rowIndex, colIndex) {
var row = this.getRow(rowIndex);
var index = colIndex;
if (this.showCheckbox) index++;
if (this.showRowNum) index++;
return row.children("div").eq(index);
}
/**
* 移除行
* @param {[type]} rowIndex [description]
* @return {[type]} [description]
*/
}, {
key: "removeRow",
value: function removeRow(rowIndex) {
var divDataList = this._jqObj.children(".tfp-grid-datalist");
divDataList.children("div").eq(rowIndex).remove();
}
/**
* 删除行数据
* @param {[type]} keyValue [description]
* @return {[type]} [description]
*/
}, {
key: "deleteRowData",
value: function deleteRowData(keyValue) {
if (!this.dataModel.delDataService) {
alert("请设置删除数据的服务！");
return;
}
if (!this.dataModel.dataBindingKey) {
alert("请设置数据主键字段名！");
return;
}
if (confirm("确定删除？")) {
var serviceCpt = this._tfp.components[this.dataModel.delDataService];
var args = {};
if (this.dataModel.dataBindingKey.indexOf(",") < 0) {
args[this.dataModel.dataBindingKey] = keyValue;
} else {
var dataKeys = this.dataModel.dataBindingKey.split(",");
for (var i = 0; i < dataKeys.length; i++) {
if (arguments.length < i + 2) break;
args[dataKeys[i]] = arguments[i + 1];
}
}
var that = this;
serviceCpt.request(args, function (req, res) {
if (res.code != 0) {
that._tfp.showMsg(res.message);
return;
}
that.reloadData();
});
}
} //该方法将来不再使用，请使用deleteRowData
}, {
key: "deleteRow",
value: function deleteRow(keyValue) {
this.deleteRowData(keyValue);
}
/*orderBy(col, type) {
if (!this.order_flag) return;
this.orders = this.orders.filter(v => v.name != col)
this.orders.push({
name: col,
order: type
})
var html;
if (type == 'asc') html = `<img class="order-up" src="${this._tfp.rootPath}/src/components/grid/images/icon-up-blue.png"/>
<img class="order-down" src="${this._tfp.rootPath}/src/components/grid/images/icon-down-black.png" onclick=\"tfp.get('${this.dataModel.id}').orderBy('${col}','desc')" />`;
if (type == 'desc') html = `<img class="order-up" src="${this._tfp.rootPath}/src/components/grid/images/icon-up-black.png" onclick=\"tfp.get('${this.dataModel.id}').orderBy('${col}','asc')" />
<img class="order-down" src="${this._tfp.rootPath}/src/components/grid/images/icon-down-blue.png"/>`
this._jqObj.find(".order.name_" + col).eq(0).html(html);
this.loadData(1);
}*/
}, {
key: "checkAll",
value: function checkAll(cbk) {
if (cbk.checked) {
this._jqObj.children(".tfp-grid-datalist").find(".tfp-grid-datarow-checkbox").each(function () {
if ($(this).find("input").get(0)) {
$(this).find("input").get(0).checked = true;
}
});
} else {
this._jqObj.children(".tfp-grid-datalist").find(".tfp-grid-datarow-checkbox").each(function () {
if ($(this).find("input").get(0)) {
$(this).find("input").get(0).checked = false;
}
});
}
}
/**
* 获得选中行的主键值
* @return {[type]} [description]
*/
}, {
key: "getCheckedKeys",
value: function getCheckedKeys() {
var vals = "";
this._jqObj.children(".tfp-grid-datalist").find(".tfp-grid-datarow-checkbox").each(function () {
var cbk = $(this).find("input").get(0);
if (cbk.checked) {
if (vals != "") vals += ",";
vals += cbk.value;
}
});
return vals;
}
/**
* 该方法将来不再使用
* @return {[type]} [description]
*/
}, {
key: "getCheckedValues",
value: function getCheckedValues() {
return this.getCheckedKeys();
}
/**
* 获得选中的数据
* @return {[type]} [description]
*/
}, {
key: "getCheckedData",
value: function getCheckedData() {
var rows = [];
var cbks = this._jqObj.children(".tfp-grid-datalist").find(".tfp-grid-datarow-checkbox");
for (var i = 0; i < cbks.length; i++) {
var cbk = $(cbks[i]).find("input").get(0);
if (cbk.checked) {
rows.push(this.dataList[i]);
}
}
return rows;
}
/**
* 该方法将来不再使用
* @return {[type]} [description]
*/
}, {
key: "getCheckedRows",
value: function getCheckedRows() {
return this.getCheckedData();
}
}, {
key: "getRowsChecked",
value: function getRowsChecked() {
var rows = [];
this._jqObj.children(".tfp-grid-datalist").children("div").each(function (index) {
var cbk = $(this).children(".tfp-grid-datarow-checkbox");
if (cbk.length > 0 && cbk.get(0).checked) rows.push($(this));
});
return rows;
} //设置合计行
}, {
key: "setSumer",
value: function setSumer() {
if (!this.dataModel.showSumer) return;
var divSumer = this._jqObj.children(".tfp-grid-sumer");
for (var i = 0; i < this.columns.length; i++) {
var col = this.columns[i];
if (col.sum) {
var colIndex = i;
if (this.dataModel.showCheckbox) colIndex++;
if (this.dataModel.showRowNum) colIndex++;
var colDiv = divSumer.children("div").eq(colIndex);
if (col.dataFormat == "int") {
colDiv.html(parseInt(col.sumValue));
} else if (col.dataFormat == "money|0.00") {
colDiv.html(this._tfp.formatMoney(col.sumValue, 2));
} else if (col.dataFormat == "money|0,000.00") {
colDiv.html(this._tfp.formatMoney(col.sumValue, 2, true));
} else {
if (col.decimalLength && col.decimalLength + "" != "0") {
colDiv.html(this._tfp.formatDecimal(col.sumValue, col.decimalCalcReg, col.decimalLength));
} else if (col.decimalLength + "" == "0") {
colDiv.html(parseInt(col.sumValue));
} else {
colDiv.html(parseFloat(col.sumValue));
}
}
}
}
}
}, {
key: "setFooter",
value: //设置翻页行
function setFooter() {
if (this.dataModel.showSumer) this.setSumer();
if (this.dataModel.allowPaging) {
var footerDiv = this._jqObj.children(".tfp-grid-footer");
footerDiv.find(".tfp-grid-curpage").text(this.curPage);
footerDiv.find(".tfp-grid-pagecount").text(this.pageCount);
footerDiv.find(".tfp-grid-rowcount").text(this.rowsCount);
}
}
}, {
key: "changePageSize",
value: function changePageSize(slt) {
if (!this.dataModel.loadDataService || !this.dataModel.dataBindingMember) return;
this.pageSize = slt.value;
this.loadData(this.curPage);
}
}, {
key: "gotoPage",
value: function gotoPage(toPage) {
this.loadData(toPage);
}
/**
* 绑定数据
* @param {[type]} data [description]
* @return {[type]} [description]
*/
}, {
key: "bindData",
value: function bindData(data) {
if (!data || !Array.isArray(data)) return;
this.dataList = data;
if (this.dataModel.onBeforeBindData) {
try {
eval(this.dataModel.onBeforeBindData);
} catch (err) {
console.log(err);
}
}
var dataListEl = this._jqObj.children(".tfp-grid-datalist");
dataListEl.empty();
if (this.showHeader && this.showCheckbox) {
var cbk = this._jqObj.children(".tfp-grid-header").find(".tfp-grid-header-checkbox");
if (cbk.length > 0) cbk.find("input").get(0).checked = false;
} //如果显示合计栏，则需要初始化合计列的值
if (this.dataModel.showSumer) {
for (var j = 0; j < this.columns.length; j++) {
var col = this.columns[j];
if (col.sum) col.sumValue = 0;
}
} //生成行模板
if (!this.rowTemplate) this.rowTemplate = this.getRowTemplate();
if (this.dataList instanceof Array) {
for (var i = 0; i < this.dataList.length; i++) {
this.addRow(this.dataList[i]); //如果显示合计栏，则需要计算合计列
if (this.dataModel.showSumer) {
for (var j = 0; j < this.columns.length; j++) {
var _col = this.columns[j];
if (_col.sum) {
var colVal = 0;
try {
colVal = this._tfp.replaceDataField(this.dataList[i], _col.format);
colVal = this._tfp.exeExpress(colVal);
if (isNull(colVal)) continue;
if (_col.dataFormat == "int") {
colVal = parseInt(colVal);
} else {
colVal = parseFloat(colVal);
}
_col.sumValue += colVal;
} catch (e) {
console.log(e);
}
}
}
}
}
} else {
this.dataList = [];
}
this.setFooter();
this.onResize();
if (this.dataModel.onAfterBindData) {
try {
eval(this.dataModel.onAfterBindData);
} catch (err) {
console.log(err);
}
}
}
}, {
key: "getRowWidth",
value: function getRowWidth() {
var rowWith = 0;
if (this.dataModel.showCheckbox) rowWith += 30;
if (this.showBorder) rowWith++;
if (this.dataModel.showRowNum) rowWith += 50;
if (this.showBorder) rowWith++;
for (var i = 0; i < this.columns.length; i++) {
var col = this.columns[i];
var colWidth = this.getColWidth(col.width);
if (colWidth.indexOf("%") > 0) {
this.havePercentWidth = true;
} else {
rowWith += parseInt(colWidth.replace("px", "").replace("%", ""));
}
if (i < this.columns.length - 1 && this.showBorder) rowWith++;
}
return rowWith;
}
}, {
key: "onResize",
value: function onResize() {
var dataListEl = this._jqObj.children(".tfp-grid-datalist");
var headerEl = this._jqObj.children(".tfp-grid-header");
var sumerEl = this._jqObj.children(".tfp-grid-sumer");
if (dataListEl.get(0).scrollHeight > dataListEl.get(0).clientWidth) {
if (headerEl.length > 0) headerEl.css("overflow-y", "scroll");
if (sumerEl.length > 0) sumerEl.css("overflow-y", "scroll");
dataListEl.children("div").last().children("div").css("border-bottom", "0");
} else {
if (headerEl.length > 0) headerEl.css("overflow-y", "hidden");
if (sumerEl.length > 0) sumerEl.css("overflow-y", "hidden");
dataListEl.children("div").last().children("div").css("border-bottom", "1px solid " + this.borderColor);
}
var rowWith = this.getRowWidth();
if (rowWith > dataListEl.width()) {
if (headerEl.length > 0) headerEl.css("width", "");
dataListEl.css("width", "");
if (sumerEl.length > 0) sumerEl.css("width", "");
} else {
if (headerEl.length > 0) headerEl.css("width", "100%");
dataListEl.css("width", "100%");
if (sumerEl.length > 0) sumerEl.css("width", "100%");
}
}
}, {
key: "loadData",
value: function loadData(toPage) {
if (!this.dataModel.loadDataService) {
//alert("请为["+this.id+"]设置加载数据服务！");
return;
}
var serviceCpt = this._tfp.get(this.dataModel.loadDataService);
if (!serviceCpt) {
alert("ID为[" + this.dataModel.loadDataService + "]的组件不存在！");
return;
}
if (!this.dataModel.dataBindingMember) {
alert("请为[" + this.id + "]设置数据绑定成员！");
return;
}
var args = {};
if (this.allowPaging) {
args = {
pageSize: this.pageSize,
toPage