tfp
Version:
A Web UI framework for TaskBuilder
1,418 lines (1,306 loc) • 50.1 kB
JavaScript
import {
VisibleComponent
} from "../controller.js";
/**
* 数据表格组件
* @param {[type]} dataModel [description]
*/
export default class Grid extends VisibleComponent {
constructor(__tfp, dataModel, parent) {
super(__tfp, "Grid", dataModel, parent);
this.curPage = 1;
this.pageCount = 0;
this.rowsCount = 0;
this.dataList = [];
this.orders = [];
}
/******************* 数据绑定设置 *******************/
get loadDataService() {
return this.dataModel.loadDataService
}
set loadDataService(value) {
this.dataModel.loadDataService = value
}
get dataBindingMember() {
return this.dataModel.dataBindingMember
}
set dataBindingMember(value) {
this.dataModel.dataBindingMember = value
}
get dataBindingKey() {
return this.dataModel.dataBindingKey
}
set dataBindingKey(value) {
this.dataModel.dataBindingKey = value
}
get delDataService() {
return this.dataModel.delDataService
}
set delDataService(value) {
this.dataModel.delDataService = value
}
/******************* 表头设置 *******************/
get showHeader() {
return this.dataModel.showHeader ? true : false;
}
set showHeader(value) {
this.dataModel.showHeader = value ? true : false;
if (this._jqObj) {
this.reRender();
}
}
get headerBold() {
if(this.dataModel.headerBold==undefined || this.dataModel.headerBold==null) return true;
return this.dataModel.headerBold ? true : false;
}
set headerBold(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");
}
}
}
get headerBgColor() {
return this.dataModel.headerBgColor ? this.dataModel.headerBgColor : "#F0F0F0";
}
set headerBgColor(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);
}
}
get headerTextColor() {
return this.dataModel.headerTextColor ? this.dataModel.headerTextColor : "#333333";
}
set headerTextColor(value) {
this.dataModel.headerTextColor = value;
if (this._jqObj) {
this._jqObj.children(".tfp-grid-header").children("div").css("color", value);
}
}
get headerHeight() {
return this.dataModel.headerHeight ? this.dataModel.headerHeight : 40;
}
set headerHeight(value) {
if(!value) return;
let 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();
}
}
/******************* 表体设置 *******************/
get showRowNum() {
return this.dataModel.showRowNum ? true : false;
}
set showRowNum(value) {
this.dataModel.showRowNum = value ? true : false;
this.reRender();
}
get showBorder() {
return this.dataModel.showBorder ? true : false;
}
set showBorder(value) {
this.dataModel.showBorder = value ? true : false;
this.reRender();
}
get showCheckbox() {
return this.dataModel.showCheckbox ? true : false;
}
set showCheckbox(value) {
this.dataModel.showCheckbox = value ? true : false;
this.reRender();
}
get borderColor() {
return this.dataModel.borderColor ? this.dataModel.borderColor : "#999999";
}
set borderColor(value) {
this.dataModel.borderColor = value;
this.reRender();
}
get singleColor() {
return this.dataModel.singleColor;
}
set singleColor(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) {
let color = "";
if(value) color = value;
$(this).css("background-color", color);
$(this).children("div").css("background-color", color);
}
});
}
}
get doubleColor() {
return this.dataModel.doubleColor;
}
set doubleColor(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) {
let color = "";
if(value) color = value;
$(this).css("background-color", color);
$(this).children("div").css("background-color", color);
}
});
}
}
get rowHeight() {
return this.dataModel.rowHeight
}
set rowHeight(value) {
this.dataModel.rowHeight = value;
if (this._jqObj) {
let rowHeight = value + "";
if (!rowHeight) rowHeight = "40";
if (rowHeight.indexOf("px") > 0) rowHeight = rowHeight.replace("px", "");
let divDataList = this._jqObj.children(".tfp-grid-datalist");
divDataList.children("div").css("height", rowHeight+"px");
divDataList.children("div").children("div").css("height", rowHeight+"px");
}
}
/******************* 表尾设置 *******************/
get showSumer() {
return this.dataModel.showSumer
}
set showSumer(value) {
this.dataModel.showSumer = value ? true : false;
if (this._jqObj) {
this.resetFooter();
}
}
get allowPaging() {
return this.dataModel.allowPaging ? true : false;
}
set allowPaging(value) {
this.dataModel.allowPaging = value ? true : false;
if (this._jqObj) {
this.resetFooter();
}
}
get pageSize() {
return this.dataModel.pageSize
}
set pageSize(value) {
this.dataModel.pageSize = value
}
get columns() {
let 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 columns(value) {
this.dataModel.columns = value;
if (this._jqObj) {
this.reRender();
}
}
get header() {
return this._jqObj.children(".tfp-grid-header");
}
set header(value) {
//
}
get body() {
return this._jqObj.children(".tfp-grid-datalist");
}
set body(value) {
//
}
get sumer() {
return this._jqObj.children(".tfp-grid-sumer");
}
set sumer(value) {
//
}
get footer() {
return this._jqObj.children(".tfp-grid-footer");
}
set footer(value) {
//
}
resetFooter() {
let divSumer = this._jqObj.children(".tfp-grid-sumer");
if (divSumer.length > 0) divSumer.remove();
let 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();
}
reRender() {
this._jqObj.empty();
let Render = this._tfp.renders[this.type];
if (Render) {
let render = new Render(this._tfp, this.dataModel, this.level);
this._jqObj.html(render.getBodyHtml(false));
}
this.initDesigning();
}
getHeaderHtml() {
let indent = this.getHtmlIndent();
let htmlHeader = indent + "\t<div class=\"tfp-grid-header\" style=\""
+"background-color:"+this.headerBgColor+";border: 1px solid "
+this.borderColor+";height:"+this.headerHeight+";\">\r\n";
let heightStyle = "height:"+(this.headerHeight-2)+"px;";
this.rowWith = 0;
let 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";
}
let havePercentWidth = false;
for (var i = 0; i < this.columns.length; i++) {
let col = this.columns[i];
htmlHeader += indent + "\t\t\t\t<div";
let style = headerStyle;
if(i<(this.columns.length-1) && this.showBorder) {
style += "border-right:1px solid "+this.borderColor+";";
this.rowWith++;
}
let 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]
*/
getColWidth(width) {
if (!width || width=="px") return "80";
return (width + "").replace("px", "");
}
resetDataListPosition() {
let divDataList = this._jqObj.children(".tfp-grid-datalist");
if (this.dataModel.showHeader) {
divDataList.css("top", (this.headerHeight - 1)+ "px");
} else {
divDataList.css("top", "0");
}
let dataListBottom = 0;
if (this.dataModel.showSumer) dataListBottom += 39;
if (this.dataModel.allowPaging) dataListBottom += 49;
divDataList.css("bottom", dataListBottom + "px");
};
/**
* 获得行模板
* @return {[type]} [description]
*/
getRowTemplate() {
if (!this.columns) return;
let indent = this.getHtmlIndent();
let html = "";
html += indent + `\t\t\t<div class="tfp-grid-datarow"`;
let 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 {
let keys = this.dataModel.dataBindingKey.split(",");
let 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++) {
let col = this.columns[i];
html += indent + "\t\t\t\t<div";
if (col.class) html += ` class="${col.class}"`
let cellFormat = col.format;
let 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 + ";"
}
}
let 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") {
let 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('${col.targetTitle}', '${col.linkUrl}')" ${linkStyle}>${col.format}</a>`;
} else if (col.linkType == "dialog") { //对话框
html += `<a href="javascript:tfp.openDialog('${col.targetTitle}', '${col.linkUrl}', '${col.dialogWidth}px', '${col.dialogHeight}px')" ${linkStyle}>
${col.format}
</a>`;
} else if (col.linkType == "window") { //新窗口
html += `<a href="javascript:window.open('${col.linkUrl}', '${col.targetTitle}') " ${linkStyle}>${col.format}</a>`;
} else { //当前页面
html += `<a href="${col.linkUrl}" ${linkStyle}>${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=\"";
let textColor = col.buttonFontColor ? col.buttonFontColor : "#FFFFFF";
html += "color:" + textColor + ";"
let 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 + ";";
}
let 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 += ">";
let bgColor = "#999999";
let divFloat = "left";
if (cellFormat && cellFormat.indexOf("{") == 0 && col.selectedValue) {
divFloat = "#[('" + cellFormat + "')=='" + col.selectedValue + "' ? 'right' : 'left']";
let 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\">";
let bgColor = "#0099ff";
//if (col.bgColor) bgColor = col.bgColor;
html += "<div class=\"tfp-grid-cell-progress-bar\" style=\"background-color:" + bgColor + ";\"></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;
}
getSumerHtml() {
if(!this.showSumer) return "";
let 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++) {
let col = this.columns[i];
html += indent + "\t\t<div";
let colWidth = this.getColWidth(col.width);
let 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;
}
getFooterHtml() {
if (!this.allowPaging) return "";
let indent = this.getHtmlIndent();
let 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";
let pageSizeOptions = [20, 30, 50, 100];
for (var i = 0; i < pageSizeOptions.length; i++) {
let 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]
*/
addRow(rowData) {
var that = this;
if (!this.rowTemplate) {
this.rowTemplate = this.getRowTemplate();
}
let divDataList = this._jqObj.children(".tfp-grid-datalist");
let 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);
let newRow = $(rowHtml);
for (var i = 0; i < this.columns.length; i++) {
let col = this.columns[i];
let celElIndex = i;
if(this.dataModel.showCheckbox) celElIndex++;
if(this.dataModel.showRowNum) celElIndex++;
let cellDiv = newRow.children().eq(celElIndex);
let haveSetBgColor = false;
//如果设置了内容显示条件，则进行判断
if(col.displayConditions && col.displayConditions.length>0) {
let haveMatch = false;
for(let 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) {
let 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 这个参数在最新版的里面已经没有了
let condition = this._tfp.replaceDataField(rowData, col.displayCondition);
let conditionRet = false;
try {
conditionRet = eval(condition);
} catch (e) {
console.log(e);
}
if (!conditionRet) cellDiv.html("");
}
//如果设置了最大长度
if(col.maxLength && (!col.contentType || col.contentType=="text")) {
let content = cellDiv.html();
if(content.length>col.maxLength) cellDiv.html(content.substr(0, col.maxLength)+"...");
}
//设置进度条
if (col.contentType == "progress" && col.format) {
let 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) {
let 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) {
let colRowNum = newRow.children("div").get(0);
if(this.showCheckbox) colRowNum = newRow.children("div").get(1);
colRowNum.innerHTML = rowData._rowNum;
}
//设置单双行背景颜色
this.setRowBgColor(rowIndex);
let 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) {
let 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 {
let 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);
}
}
}
setRowBgColor(rowIndex) {
let 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]
*/
getRow(rowIndex) {
let divDataList = this._jqObj.children(".tfp-grid-datalist");
return divDataList.children("div").eq(rowIndex);
}
/**
* 获得指定单元格
* @param {[type]} rowIndex [description]
* @param {[type]} colIndex [description]
* @return {[type]} [description]
*/
getCell(rowIndex, colIndex) {
let row = this.getRow(rowIndex);
let index = colIndex;
if(this.showCheckbox) index++;
if(this.showRowNum) index++;
return row.children("div").eq(index);
}
/**
* 移除行
* @param {[type]} rowIndex [description]
* @return {[type]} [description]
*/
removeRow(rowIndex) {
let divDataList = this._jqObj.children(".tfp-grid-datalist");
divDataList.children("div").eq(rowIndex).remove();
}
/**
* 删除行数据
* @param {[type]} keyValue [description]
* @return {[type]} [description]
*/
deleteRowData(keyValue) {
if (!this.dataModel.delDataService) {
alert("请设置删除数据的服务！");
return;
}
if (!this.dataModel.dataBindingKey) {
alert("请设置数据主键字段名！");
return;
}
if (confirm("确定删除？")) {
let serviceCpt = this._tfp.components[this.dataModel.delDataService];
let args = {};
if (this.dataModel.dataBindingKey.indexOf(",") < 0) {
args[this.dataModel.dataBindingKey] = keyValue;
} else {
let 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];
}
}
let that = this;
serviceCpt.request(args, function (req, res) {
if (res.code != 0) {
that._tfp.showMsg(res.message);
return;
}
that.reloadData();
});
}
}
//该方法将来不再使用，请使用deleteRowData
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);
}*/
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]
*/
getCheckedKeys() {
let vals = "";
this._jqObj.children(".tfp-grid-datalist").find(".tfp-grid-datarow-checkbox").each(function () {
let cbk = $(this).find("input").get(0);
if (cbk.checked) {
if (vals != "") vals += ",";
vals += cbk.value;
}
});
return vals;
}
/**
* 该方法将来不再使用
* @return {[type]} [description]
*/
getCheckedValues() {
return this.getCheckedKeys();
}
/**
* 获得选中的数据
* @return {[type]} [description]
*/
getCheckedData() {
let rows = [];
let cbks = this._jqObj.children(".tfp-grid-datalist").find(".tfp-grid-datarow-checkbox");
for (var i = 0; i < cbks.length; i++) {
let cbk = $(cbks[i]).find("input").get(0);
if (cbk.checked) {
rows.push(this.dataList[i]);
}
}
return rows;
}
/**
* 该方法将来不再使用
* @return {[type]} [description]
*/
getCheckedRows() {
return this.getCheckedData();
}
getRowsChecked() {
let rows = [];
this._jqObj.children(".tfp-grid-datalist").children("div").each(function(index){
let cbk = $(this).children(".tfp-grid-datarow-checkbox");
if(cbk.length>0 && cbk.get(0).checked) rows.push($(this));
});
return rows;
}
//设置合计行
setSumer() {
if(!this.dataModel.showSumer) return;
let divSumer = this._jqObj.children(".tfp-grid-sumer");
for (var i = 0; i < this.columns.length; i++) {
let col = this.columns[i];
if (col.sum) {
let colIndex = i;
if (this.dataModel.showCheckbox) colIndex++;
if (this.dataModel.showRowNum) colIndex++;
let 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));
}
}
}
}
};
//设置翻页行
setFooter() {
if (this.dataModel.showSumer) this.setSumer();
if (this.dataModel.allowPaging) {
let 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);
}
}
changePageSize(slt) {
if (!this.dataModel.loadDataService || !this.dataModel.dataBindingMember) return;
this.pageSize = slt.value;
this.loadData(this.curPage);
}
gotoPage(toPage) {
this.loadData(toPage);
}
/**
* 绑定数据
* @param {[type]} data [description]
* @return {[type]} [description]
*/
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);
}
}
let dataListEl = this._jqObj.children(".tfp-grid-datalist");
dataListEl.empty();
if(this.showHeader && this.showCheckbox) {
let 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++) {
let 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++) {
let col = this.columns[j];
if (col.sum) {
let 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);
}
}
}
getRowWidth() {
let 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++) {
let col = this.columns[i];
let 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;
}
onResize() {
let dataListEl = this._jqObj.children(".tfp-grid-datalist");
let headerEl = this._jqObj.children(".tfp-grid-header");
let 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);
}
let 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%");
}
}
loadData(toPage) {
if (!this.dataModel.loadDataService) {
//alert("请为["+this.id+"]设置加载数据服务！");
return;
}
let 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: toPage ? toPage : 1,
orders: this.orders
};
}
let that = this;
//与服务组件建立绑定
if (!serviceCpt.bindCpts) serviceCpt.bindCpts = [];
if (!serviceCpt.bindCpts.contains(this.id)) serviceCpt.bindCpts.push(this.id);
serviceCpt.status = 0;
if(this.dataModel.onBeforeLoadData) {
try {
eval(this.dataModel.onBeforeLoadData);
} catch(err) {
console.log(err);
}
}
serviceCpt.request(args, function (req, res) {
if(that.dataModel.onAfterLoadData) {
try {
eval(that.dataModel.onAfterLoadData);
} catch(err) {
console.log(err);
}
}
var data = res[that.dataModel.dataBindingMember];
if (!data) return;
if (that.allowPaging) {
if (data.rows) {
that.curPage = data.toPage;
that.rowsCount = data.rowsCount;
that.pageCount = data.pageCount;
that.pageSize = data.pageSize;
that.bindData(data.rows);
} else if (Array.isArray(data)) {
that.curPage = 1;
that.rowsCount = data.length;
that.pageCount = 1;
that.pageSize = data.length;
that.bindData(data);
}
} else {
if (data.rows) {
that.bindData(data.rows);
} else {
that.bindData(data);
}
}
});
}
reloadData() {
this.loadData(1);
}
initDesigning() {
let divHeader = this._jqObj.children(".tfp-grid-header");
let divDataList = this._jqObj.children(".tfp-grid-datalist");
let divSumer = this._jqObj.children(".tfp-grid-sumer");
let gridWidth = this._jqObj.width();
let dataListWidth = divDataList.children("div").eq(0).width();
if(dataListWidth<(gridWidth-2)) {
if (divHeader.length > 0) divHeader.css("width", "100%");
divDataList.css("width", "100%");
if (divSumer.length > 0) divSumer.css("width", "100%");
}
if(divSumer.length > 0 && this.allowPaging) {
divSumer.css("bottom", "49px");
}
divDataList.scroll(function () {
if (divHeader.length > 0) {
divHeader.get(0).scrollLeft = divDataList.get(0).scrollLeft;
}
if (divSumer.length > 0) {
divSumer.get(0).scrollLeft = divDataList.get(0).scrollLeft;
}
});
}
initRuntime() {
let that = this;
this.initDesigning();
/*let columns = this.columns;
for (var i = 0; i < columns.length; i++) {
let col = columns[i];
if (col.allowOrder && col.order) {
this.orders.push({
name: col.order,
order: col.orderType ? col.orderType : 'asc'
});
}
}
this.order_flag = true;*/
/*if (divHeader.length > 0) {
divHeaderRow.children().each(function (index) {
let _this = this;
$(this).css("resize", "horizontal");
new ResizeObserver(function (e) {
that._jqObj.children(".tfp-grid-datarow").each(function (i) {
$(this).children().eq(index).css("width", _this.offsetWidth + "px")
});
that._jqObj.children(".tfp-grid-sumer").each(function (i) {
$(this).children().eq(index).css("width", _this.offsetWidth + "px")
});
}).observe(this);
});
}*/
if (this.allowPaging) {
let divFooter = this._jqObj.children(".tfp-grid-footer");
divFooter.find(".tfp-grid-btn-first").click(function () {
that.gotoPage(1);
});
divFooter.find(".tfp-grid-btn-prev").click(function () {
var prevPage = that.curPage - 1;
if (prevPage < 1) prevPage = 1;
that.gotoPage(prevPage);
});
divFooter.find(".tfp-grid-btn-next").click(function () {
var nextPage = that.curPage + 1;
if (nextPage > that.pageCount) nextPage = that.pageCount;
that.gotoPage(nextPage);
});
divFooter.find(".tfp-grid-btn-last").click(function () {
that.gotoPage(that.pageCount);
});
divFooter.find("select").change(function () {
that.changePageSize($(this).get(0));
});
}
$(window).resize(function () {
that.onResize();
});
let toPage = this._tfp.getUrlArg("toPage");
if(!toPage) toPage = 1;
this.loadData(toPage);
}
}