tfp/src/components/dataset/controller.pc.js

A Web UI framework for TaskBuilder

import {VisibleComponent} from "../controller.js";

/**
 * 数据集组件
 * @param {[type]} dataModel [description]
 */
export default class DataSet extends VisibleComponent {

  constructor(__tfp, dataModel, parent) {
    super(__tfp, "DataSet", dataModel, parent);

    if(this._tfp.isDesigning && (!this.dataModel.columns || this.dataModel.columns.length==0)) {
      //默认创建1行3列
      this.dataModel.columns = [{
        id: "col1",
        name: "第1列",
        type: "text",
        width: "60px"
      },{
        id: "col2",
        name: "第2列",
        type: "text",
        width: "60px"
      },{
        id: "col3",
        name: "第3列",
        type: "text",
        width: "60px"
      }];
    }
  }

  //属性
  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 columns() { return this.dataModel.columns }
  set columns(value) { 
    this.dataModel.columns = value;
    if(this._jqObj) {
      this.reRenderBody();
    }
  }

  get rows() { return this.getRows({checkRequired: false}); }
  set rows(value) { 
    this.dataModel.rows = value;
    if(this._jqObj) {
      this.reRenderBody();
    }
  }

  get keyCol() { return this.dataModel.keyCol }
  set keyCol(value) { 
    this.dataModel.keyCol = value;
    if(this._jqObj) {
      //
    }
  }

  get showAddButton() { return this.dataModel.showAddButton }
  set showAddButton(value) { 
    this.dataModel.showAddButton = value ? true : false;
    if(this._jqObj) {
      if(this.dataModel.showAddButton) {
        $(".tfp-dataset-header").css("height", "70px");
        $(".tfp-dataset-list").css("top", "71px");
        $(".tfp-dataset-toolbar").show();
        $(".tfp-dataset-button-add").show();
      } else {
        $(".tfp-dataset-button-add").hide();
        if(!this.dataModel.showAddFromDialogButton) {
          $(".tfp-dataset-toolbar").hide();
          $(".tfp-dataset-header").css("height", "30px");
          $(".tfp-dataset-list").css("top", "31px");
        }
      }
    }
  }

  get addButtonText() { 
    if(!this.dataModel.addButtonText) this.dataModel.addButtonText = "添加";
    return this.dataModel.addButtonText;
  }
  set addButtonText(value) { 
    this.dataModel.addButtonText = value;
    if(this._jqObj) {
      $(".tfp-dataset-button-add").html(value);
    }
  }

  get showAddFromDialogButton() { return this.dataModel.showAddFromDialogButton }
  set showAddFromDialogButton(value) { 
    this.dataModel.showAddFromDialogButton = value ? true : false;
    if(this._jqObj) {
      if(this.dataModel.showAddFromDialogButton) {
        $(".tfp-dataset-header").css("height", "70px");
        $(".tfp-dataset-list").css("top", "71px");
        $(".tfp-dataset-toolbar").show();
        $(".tfp-dataset-button-add-from-dialog").show();
      } else {
        $(".tfp-dataset-button-add-from-dialog").hide();
        if(!this.dataModel.showAddButton) {
          $(".tfp-dataset-toolbar").hide();
          $(".tfp-dataset-header").css("height", "30px");
          $(".tfp-dataset-list").css("top", "31px");
        }
      }
    }
  }

  get addFromDialogButtonText() { 
    if(!this.dataModel.addFromDialogButtonText) this.dataModel.addFromDialogButtonText = "弹窗选择";
    return this.dataModel.addFromDialogButtonText;
  }
  set addFromDialogButtonText(value) { 
    this.dataModel.addFromDialogButtonText = value;
    if(this._jqObj) {
      $(".tfp-dataset-button-add-from-dialog").html(value);
    }
  }

  get addFromDialogPath() { return this.dataModel.addFromDialogPath }
  set addFromDialogPath(value) { 
    this.dataModel.addFromDialogPath = value;
  }

  get addFromDialogWidth() { return this.dataModel.addFromDialogWidth }
  set addFromDialogWidth(value) {this.dataModel.addFromDialogWidth = value }

  get addFromDialogHeight() { return this.dataModel.addFromDialogHeight }
  set addFromDialogHeight(value) {this.dataModel.addFromDialogHeight = value }

  get showCheckbox() { return this.dataModel.showCheckbox }
  set showCheckbox(value) { 
    this.dataModel.showCheckbox = value ? true : false;
    if(this._jqObj) {
      this.reRenderBody();
    }
  }

  get enableDelete() { return this.dataModel.enableDelete }
  set enableDelete(value) { 
    this.dataModel.enableDelete = value ? true : false;
    if(this._jqObj) {
      this.reRenderBody();
    }
  }

  reRenderBody() {
    this.dataModel.components = [];
    this._jqObj.find(".tfp-dataset-titlerow").remove();
    this._jqObj.find(".tfp-dataset-header").append(this.getTitleHtml());
    this._jqObj.find(".tfp-dataset-list").remove();
    this._jqObj.append(this.getBodyHtml());
    this.bindEventHandler();
    //this.initRuntime();
  }

  getHeaderHtml() {
    let indent = this.getHtmlIndent();
    let headerHeight = 0;
    let showToolBar = false;
    if(this.dataModel.showAddButton 
      || this.dataModel.showAddFromDialogButton) {
      showToolBar = true;
      headerHeight = 40;
    }
    let html = indent+"\t\t<div class=\"tfp-dataset-toolbar\"";
    if(!showToolBar) html += " style=\"display:none;\"";
    html += ">\r\n";
    html += indent+"\t\t\t<div class=\"tfp-dataset-button-add\"";
    if(!this.dataModel.showAddButton) html += " style=\"display:none;\"";
    html += ">"+this.addButtonText+"</div>\r\n"; 
    html += indent+"\t\t\t<div class=\"tfp-dataset-button-add-from-dialog\"";
    if(!this.dataModel.showAddFromDialogButton) html += " style=\"display:none;\"";
    html += ">"+this.addFromDialogButtonText+"</div>\r\n"; 
    html += indent+"\t\t</div>\r\n";
    html += indent+"\t<div class=\"tfp-dataset-header\" style=\"top:"+headerHeight+"px;\">\r\n";
    html += this.getTitleHtml();
    html += indent+"\t</div>\r\n";
    return html;
  }

  getTitleHtml() {
    let indent = this.getHtmlIndent();
    let html = indent+"\t\t<div class=\"tfp-dataset-titlerow\">"; // style=\"width:{rowWidth};\">\r\n";
    this.rowWidth = 6;
    if(this.dataModel.enableDelete) this.rowWidth += 30;
    if(this.dataModel.columns) {
      if(this.dataModel.showCheckbox) {
        this.rowWidth += 24;
        html += indent+"\t\t\t<div style=\"flex-basis:24px; text-align: center;\">"
          +"<input type=\"checkbox\" class=\"tfp-checkbox tfp-dataset-checkall\" "
          +"style=\"margin-top:7px;\" onclick=\""
          +this.id+".checkAllOnClick(this)\" /></div>\r\n";
      }
      for(let i=0;i<this.dataModel.columns.length;i++) {
        let col = this.dataModel.columns[i];
        html += indent+"\t\t\t<div";
        if(col.hidden) {
          html += " style='display:none;'";
        } else {
          if(col.width) {
            html += " style='flex-basis:"+(col.width+"").replace("px","")+"px;'";
            this.rowWidth += parseInt((col.width+'').replace("px", ""));
          } else {
            if(col.type.toLowerCase()=="switch") {
              html += " style='flex-basis:40px;'";
              this.rowWidth += 40;
            } else {
              html += " style='flex-basis:100px;'";
              this.rowWidth += 100;
            }
          }
        }
        let colName = col.id;
        if(col.name) colName = col.name;
        html += ">"+colName+"</div>\r\n";
      }
      if(this.dataModel.enableDelete) {
        html += indent+"\t\t\t<div style=\"flex-basis:30px;\"></div>\r\n";
      }
    }
    //html = html.replace("{rowWidth}", (this.rowWidth+6)+"px");
    html += indent+"\t\t</div>\r\n";
    return html;
  }

  getBodyHtml() {
    let headerHeight = 30;
    if(this.dataModel.showAddButton 
      || this.dataModel.showAddFromDialogButton) {
      headerHeight = 70;
    }
    let indent = this.getHtmlIndent();
    let html = indent+"\t<div class=\"tfp-dataset-list\" style=\"top:"+(headerHeight+1)+"px;\">\r\n";
    if(this.dataModel.columns) {
      if(this.dataModel.rows && this.dataModel.rows.length>0) {
        for(var i=0;i<this.dataModel.rows.length;i++) {
          html += this.getRowHtml(i, this.dataModel.rows[i], indent, this.rowWidth);
        }
      } else if(this._tfp.isDesigning) {
        //设计时添加三行空行
        html += this.getRowHtml(0, null, indent, this.rowWidth);
        html += this.getRowHtml(1, null, indent, this.rowWidth);
        html += this.getRowHtml(2, null, indent, this.rowWidth);
      }
    }
    html += indent+"\t</div>\r\n";
    return html;
  }

  getRowWidth() {
    var rowWidth = 6;
    if(this.dataModel.enableDelete) rowWidth += 30;
    if(this.dataModel.columns) {
      if(this.dataModel.showCheckbox) rowWidth += 30;
      for(let i=0;i<this.dataModel.columns.length;i++) {
        let col = this.dataModel.columns[i];
        if(col.width) {
          rowWidth += parseInt((col.width+'').replace("px", ""));
        } else {
          if(col.type.toLowerCase()=="switch") {
            rowWidth += 40;
          } else {
            rowWidth += 100;
          }
        }
      }
    }
    return rowWidth;
  }

  /**
   * 添加数据集行
   * @param {[type]} data [description]
   */
  getRowHtml(rowIndex, rowData, indent, rowWidth) {
    if(!this.dataModel.columns) return "";
    var htmlStr = indent+"\t\t<div class=\"tfp-dataset-row\" >\r\n";
      //+"style=\"width:"+ this._tfp.formatPx(rowWidth) +";\">\r\n";
    if(this.dataModel.showCheckbox) {
      htmlStr += indent+"\t\t\t<div style=\"flex-basis:24px; text-align: center;\">"
        +"<input type=\"checkbox\" class=\"tfp-checkbox tfp-dataset-checkbox\" "
        +"style=\"margin-top:6px;\" /></div>\r\n";
    }
    this.newCpts = [];
    for(var i=0;i<this.dataModel.columns.length;i++) {
      let col = this.dataModel.columns[i];
      htmlStr += indent+"\t\t\t<div style=\"";
      if(col.hidden) htmlStr += "display:none;";
      if(col.width) {
        htmlStr += "flex-basis:"+this._tfp.formatPx(col.width)+";";
      } else {
        if(col.type.toLowerCase()=="switch") {
          htmlStr += "flex-basis:40px;";
        } else {
          htmlStr += "flex-basis:100px;";
        }
      }
      if(col.type.toLowerCase()=="date" || col.type.toLowerCase()=="datetime") {
        let cptId = this.id+"_"+col.type.toLowerCase()+"_"+rowIndex+"_"+i;
        htmlStr += "border:0px;\" id=\""+cptId+"\" class=\"tfp-"+col.type.toLowerCase()+"\"";
        let cptDateTime = {
          id: cptId,
          type: col.type.toLowerCase()=="date" ? "Date" : "DateTime"
        };
        if(this.dataModel.onCellDataChange) {
          cptDateTime.onChange = this.dataModel.onCellDataChange.substr(0, 
            this.dataModel.onCellDataChange.indexOf("("))+"("+rowIndex+", "+i+")";
        }
        this.dataModel.components.push(cptDateTime);
        this.newCpts.push(cptDateTime);
      } else {
        htmlStr += "\"";
      }
      htmlStr += ">";
      if(col.type.toLowerCase()=="select" && !col.readonly) {
        htmlStr += "<select>";
        if(!col.required) htmlStr += "<option value=\"\"></option>";
        if(col.options) {
          let options = [];
          if(Array.isArray(col.options)) {
            for(var j=0;j<col.options.length;j++) {
              let option = col.options[j];
              if(typeof(option)=="string") {
                options.push({value:option});
              } else if(Object.prototype.toString.call(option) === '[object Object]') {
                options.push(option);
              }
            }
          } else if(typeof(col.options)=="string") {
            let arr = (col.options+'').split(",");
            for(var j=0;j<arr.length;j++) {
              options.push({value:arr[j]});
            }
          }
          for(var j=0;j<options.length;j++) {
            let option = options[j];
            htmlStr += "<option value='"+option.value+"'";
            if((rowData && rowData[col.id]==option.value) 
              || (col.default==option.value && (!rowData || !rowData[col.id]))) 
              htmlStr += " selected";
            let text = option.value;
            if(option.text) text = option.text;
            htmlStr += ">"+text+"</option>";
          }
        }
        htmlStr += "</select>";
      } else if(col.type.toLowerCase()=="switch" && !col.readonly) {
        let checked = false;
        if((rowData && (rowData[col.id]+"")=="true")
          ||(col.default && (!rowData || isNull(rowData[col.id])))) 
          checked = true;
        htmlStr += "<div class=\"switch\" value=\""+checked+"\" style=\"height: 16px;\"";
        if(this._tfp.isRuntime) htmlStr += " onclick=\""+this.id+".switchOnClick(this)\"";
        htmlStr += ">";
        htmlStr += "<div";
        if(checked) htmlStr += " style=\"float: right; background-color:#0099ff;\"";
        htmlStr += "></div>";
        htmlStr += "</div>";
      } else {
        let iptType = "text";
        if(col.type.toLowerCase()=="int") {
          iptType = "number";
        } else if(col.type.toLowerCase()=="password") {
          iptType = "password";
        }
        htmlStr += "<input type=\""+iptType+"\"";
        //if(col.onchange) htmlStr += " onchange='"+col.onchange+"'";
        if(this._tfp.isDesigning || col.readonly) htmlStr += " readonly";
        if(col.readonly && this._tfp.curPage.bgColorMode=="light") 
          htmlStr += " style=\"background-color:#EEEEEE;\"";
        let cellValue = "";
        if(rowData && !isNull(rowData[col.id])) {
          cellValue = rowData[col.id];
        } else if(col.default) {
          cellValue = col.default;
        }
        if(typeof(cellValue)=="string" && cellValue.indexOf("\"")>=0) {
          htmlStr += " value='"+cellValue+"'";
        } else {
          htmlStr += " value=\""+cellValue+"\"";
        }
        htmlStr += " />";
      }
      htmlStr += "</div>\r\n";
    }
    let delIconUrl = this._tfp.rootPath+"/src/components/dataset/images/delete-blue-24.png";
    if(this.dataModel.enableDelete) {
      htmlStr += indent+"\t\t\t<div style=\"flex-basis:30px;\">"
        +"<img src='"+delIconUrl+"' title=\"删除\"";
      if(this._tfp.isRuntime) htmlStr += " onclick=\""+this.id+".deleteRow(this)\"";
      htmlStr += " /></div>\r\n";
    }
    htmlStr += indent+"\t\t</div>\r\n";
    return htmlStr;
  }

  /**
   * 点击开关时
   * @param  {[type]} divSwitch [description]
   * @return {[type]}           [description]
   */
  switchOnClick(divSwitch) {
    if($(divSwitch).find("div").css("float")=="left") {
      $(divSwitch).find("div").css("float", "right");
      $(divSwitch).find("div").css("background-color", "#0099ff");
      $(divSwitch).attr("value", "true");
    } else {
      $(divSwitch).find("div").css("float", "left");
      if(this._tfp.curPage.bgColorMode=="dark") {
        $(divSwitch).find("div").css("background-color", "#666666");
      } else {
        $(divSwitch).find("div").css("background-color", "#999999");
      }
      $(divSwitch).attr("value", "false");
    }

    let rowIndex = $(divSwitch).closest(".tfp-dataset-row").index();
    let colIndex = $(divSwitch).parent().index();
    if(this.dataModel.showCheckbox) colIndex--;
    let cellData = $(divSwitch).attr("value");

    var that = this;
    if(this.dataModel.onCellClick) {
      $(ipt).click(function() {
        try {
          eval(that.dataModel.onCellClick);
        } catch(err) {
          console.log(err);
        }
      });
    }

    if(this.dataModel.onCellDataChange) {
      try {
        eval(that.dataModel.onCellDataChange);
      } catch(err) {
        console.error(err);
      }
    }
  }

  /**
   * 执行计算表达式
   * @param  {[type]} colR      [description]
   * @param  {[type]} rowData   [description]
   * @param  {[type]} curRowDiv [description]
   * @param  {[type]} colIndex  [description]
   * @return {[type]}           [description]
   */
  exeFormula(colR, rowData, curRowDiv, colIndex) {
    let colRFormula = this._tfp.replaceDataField(rowData, colR.formula);
    var formulaVal = null;
    try {
      formulaVal = eval(colRFormula);
    } catch(error) {
      console.error(error.message);
      return;
    }
    if(colR.type=="text" && (colR.dataType=="int" || colR.dataType=="float" || colR.dataType=="money")) {
      if(colR.dataType=="int") {
        formulaVal = parseInt(formulaVal);
      } else if(colR.dataType=="float") {
        formulaVal = parseFloat(formulaVal);
      } else if(colR.dataType=="money") {
        formulaVal = this._tfp.formatMoney(formulaVal);
      }
    }
    var colRDivIndex = colIndex;
    if (this.dataModel.showCheckbox) colRDivIndex++;
    curRowDiv.children().eq(colRDivIndex).find("input").val(formulaVal);
    this._tfp.iptValueOnChange(this);
  }

  /**
   * 添加新行：该方法已废除，请使用addRow
   * @param {[type]} data [description]
   */
  addNewRow(data) {
    this.addRow(data);
  }

  bindScrollEvent() {
    var divHeader = this._jqObj.find(".tfp-dataset-header").get(0);
    var divDataList = this._jqObj.find(".tfp-dataset-list").get(0);
    divDataList.scrollTop = 0;
    divDataList.addEventListener('scroll', function(){
      divHeader.scrollLeft = divDataList.scrollLeft;
    });
  }

  bindEventHandler() {
    this.bindScrollEvent();
    var that = this;
    this._jqObj.find(".tfp-dataset-row").each(function() {
      let rowEl = $(this);
      that.bindRowEventHandler(rowEl, rowEl.index());
    });
    if(this.dataModel.components) {
      for(var i=0;i<this.dataModel.components.length;i++) {
        let cdm = this.dataModel.components[i];
        tfp.parseCpt(cdm, this);
        let cpt = tfp.components[cdm.id];
        cpt.initRuntime();
      }
    }
    this.isBindEventHandler = true;
  }

  bindRowEventHandler(rowEl, rowIndex) {
    let that = this;
    //挂载单元格事件
    for(var i=0;i<this.dataModel.columns.length;i++) {
      let col = this.dataModel.columns[i];
      let colIndex = i;
      if(this.dataModel.showCheckbox) colIndex++;
      rowEl.children().eq(colIndex).find("input").each(function() {
        that.bindCellEventHandler(this, rowIndex, colIndex);
      });
      rowEl.children().eq(colIndex).find("select").each(function() {
        that.bindCellEventHandler(this, rowIndex, colIndex);
      });
      rowEl.children().eq(colIndex).find(".switch").each(function() {
        that.bindCellEventHandler(this, rowIndex, colIndex);
      });
    }
  }

  /**
   * 绑定单元格输入项事件
   * @param  {[type]} ipt [description]
   * @return {[type]}     [description]
   */
  bindCellEventHandler(ipt, rowIndex, colIndex) {
    let that = this;
    let col = this.dataModel.columns[colIndex];
    //如果是开关，则不在此处理，而是在开关单独的点击事件函数里处理
    //如果是只读，不绑定事件
    if(!col || col.type.toLowerCase()=="switch") return;
    
    let cellData = $(ipt).val();
    //单击事件
    if(this.dataModel.onCellClick) {
      $(ipt).click(function() {
        try {
          eval(that.dataModel.onCellClick);
        } catch(err) {
          console.log(err);
        }
      });
    }
    //双击事件
    if(this.dataModel.onCellDblClick) {
      $(ipt).dblclick(function() {
        try {
          eval(that.dataModel.onCellDblClick);
        } catch(err) {
          console.log(err);
        }
      });
    }
    //获得焦点事件
    if(this.dataModel.onCellFocus) {
      $(ipt).focus(function() {
        try {
          eval(that.dataModel.onCellFocus);
        } catch(err) {
          console.log(err);
        }
      });
    }

    if(col.readonly) return;

    //如果是下拉列表，要单独处理数据变化和失去焦点事件
    if(col.type.toLowerCase()=="select") {
      if(this.dataModel.onCellDataChange || (this.calcCols && this.calcCols[col.id])) {
        $(ipt).change(function() {
          try {
            eval(that.dataModel.onCellDataChange);
          } catch(err) {
            console.error(err);
          }
          that.formulaCell(this, col);
        });
      }
      if(this.dataModel.onCellBlur) {
        $(ipt).blur(function() {
          try {
            eval(that.dataModel.onCellBlur);
          } catch(err) {
            console.error(err);
          }
        });
      }
    }
    //最后再处理单行输入框的失去焦点事件
    //因为单行输入框DOM元素没有数据变化事件
    if(col.type.toLowerCase()=="text" || col.type.toLowerCase()=="password") {
      $(ipt).blur(function() {
        if(that.dataModel.onCellBlur) {
          try {
            eval(that.dataModel.onCellBlur);
          } catch(err) {
            console.log(err);
          }
        }
        if(that.dataModel.onCellDataChange) {
          try {
            eval(that.dataModel.onCellDataChange);
          } catch(err) {
            console.error(err);
          }
        }
        that.formulaCell(this, col);
      });
      if(that.dataModel.onCellKeyPress) {
        $(ipt).keypress(function() {
          try {
            eval(that.dataModel.onCellKeyPress);
          } catch(err) {
            console.error(err);
          }
        });
      }
    }
  }

  formulaCell(ipt, col) {
    if(!(this.calcCols && this.calcCols[col.id])) return;
    //获得当前行的数据
    let curRowDiv = $(ipt).parent().parent();
    let rowDataTmp = this.getRow(curRowDiv.index(), {autoFormat: true}).row;
    var arr = this.calcCols[col.id];
    for(var j=0;j<arr.length;j++) {
      for(var k=0;k<this.dataModel.columns.length;k++) {
        var colR = this.dataModel.columns[k];
        if(arr[j]==colR.id && colR.formula) {
          this.exeFormula(colR, rowDataTmp, curRowDiv, k);
          break;
        }
      }
    }
  }

  /**
   * 添加行
   * @param {[type]} data [description]
   */
  addRow(data) {
    let dataList = this._jqObj.find(".tfp-dataset-list");
    let rowIndex = dataList.find(".tfp-dataset-row").length;
    let rowData = data;
    if (!rowData) rowData = {};
    if(this.dataModel.onBeforeAddRow) {
      try {
        eval(this.dataModel.onBeforeAddRow)
      } catch(err) {
        console.log(err);
      }
    }

    this.rows.push(rowData);
    let rowWidth = this.getRowWidth();
    let indent = this.getHtmlIndent();
    let rowHtml = this.getRowHtml(rowIndex, data, indent+"\t\t", rowWidth);
    dataList.append(rowHtml);
    if(this.newCpts && this.newCpts.length>0) {
      for(var i=0;i<this.newCpts.length;i++) {
        let cdm = this.newCpts[i];
        tfp.parseCpt(cdm, this);
        var cpt = tfp.components[cdm.id];
        cpt.initRuntime();
      }
    }
    this.newCpts = [];
    var lastRow = dataList.find(".tfp-dataset-row").last();
    if(lastRow.find("input").length>0) {
      lastRow.find("input").eq(0).focus();
    } else if(lastRow.find("select").length>0) {
      lastRow.find("select").eq(0).focus();
    }

    if(this.dataModel.onAfterAddRow) {
      try {
        eval(this.dataModel.onAfterAddRow)
      } catch(err) {
        console.log(err);
      }
    }

    this.bindRowEventHandler(lastRow, rowIndex);
    
    /*let that = this;
    //挂载单元格事件
    for(var i=0;i<this.dataModel.columns.length;i++) {
      let col = this.dataModel.columns[i];
      let colIndex = i;
      if(this.dataModel.showCheckbox) colIndex++;
      lastRow.children().eq(colIndex).find("input").each(function() {
        that.bindCellEventHandler(this, rowIndex, colIndex);
      });
      lastRow.children().eq(colIndex).find("select").each(function() {
        that.bindCellEventHandler(this, rowIndex, colIndex);
      });
      lastRow.children().eq(colIndex).find(".switch").each(function() {
        that.bindCellEventHandler(this, rowIndex, colIndex);
      });
    }*/
  }

  /**
   * 通过点击删除图片删除行
   * @param  {[type]} img [description]
   * @return {[type]}     [description]
   */
  deleteRow(img) {
    this.removeRow($(img).parent().parent().index());
  }

  /**
   * 删除行
   * @param  {[type]} rowIndex [description]
   * @return {[type]}          [description]
   */
  removeRow(rowIndex) {
    let rowData = this.rows[rowIndex];
    if (this.dataModel.onBeforeRemoveRow) {
      try {
        eval(this.dataModel.onBeforeRemoveRow);
      } catch (err) {
        console.log(err);
      }
    }
    this._jqObj.find(".tfp-dataset-row").eq(rowIndex).remove();
    if(this.dataModel.onRemoveRow) {
      try {
        eval(this.dataModel.onRemoveRow);
      } catch(err) {
        console.log(err);
      }
    }
    if (this.dataModel.onAfterRemoveRow) {
      try {
        eval(this.dataModel.onAfterRemoveRow);
      } catch (err) {
        console.log(err);
      }
    }
  }

  /**
   * 点击全选框后
   * @param  {[type]} cbk [description]
   * @return {[type]}     [description]
   */
  checkAllOnClick(cbk) {
    let dataList = this._jqObj.find(".tfp-dataset-list");
    dataList.find(".tfp-dataset-checkbox").each(function() {
      $(this).get(0).checked = cbk.checked;
    });
  }

  /**
   * 全部选中
   * @return {[type]} [description]
   */
  checkAll() {
    if(!this.dataModel.showCheckbox) return;
    let dataList = this._jqObj.find(".tfp-dataset-list");
    dataList.find(".tfp-dataset-checkbox").each(function() {
      $(this).get(0).checked = true;
    });
  }

  /**
   * 取消全选
   * @return {[type]} [description]
   */
  unCheckAll() {
    if(!this.dataModel.showCheckbox) return;
    let dataList = this._jqObj.find(".tfp-dataset-list");
    dataList.find(".tfp-dataset-checkbox").each(function() {
      $(this).get(0).checked = false;
    });
  }

  /**
   * 选中指定键值的行
   * @param  {[type]} keys [description]
   * @return {[type]}      [description]
   */
  checkRows(keys) {
    if(!this.dataModel.showCheckbox || !this.dataModel.keyCol || !keys) return;
    if(typeof(keys) == "string") keys = keys.split(",");
    let keyColIndex = 0;
    for(var i=0;i<this.dataModel.columns.length;i++) {
      let col = this.dataModel.columns[i];
      if(col.id==this.dataModel.keyCol) {
        keyColIndex = i+1;
        break;
      }
    }
    if(keyColIndex==0) return;
    let dataList = this._jqObj.find(".tfp-dataset-list");
    dataList.find(".tfp-dataset-row").each(function() {
      let keyColDiv = $(this).children("div").eq(keyColIndex);
      let key = keyColDiv.find("input").val();
      if(keys.contains(key)) $(this).find(".tfp-dataset-checkbox").get(0).checked = true;
    });
  }

  /**
   * 获得选中的行
   * @param  {Function} cb [description]
   * @return {[type]}      [description]
   */
  getCheckedRows(cb) {
    if(cb) {
      this.getRows({onlyGetChecked: true, checkRequired: true}, cb);
      return;
    }
    return this.getRows({onlyGetChecked: true, checkRequired: true});
  }

  /**
   * 获得指定单元格的数据
   * @param  {[type]} rowIndex  [description]
   * @param  {[type]} _colIndex [description]
   * @return {[type]}           [description]
   */
  getCellData(rowIndex, _colIndex) {
    let dataList = this._jqObj.find(".tfp-dataset-list");
    let rowDiv = dataList.find(".tfp-dataset-row").eq(rowIndex);
    let colIndex = _colIndex;
    if(this.dataModel.showCheckbox) colIndex++;
    let val = null;
    let colDiv = rowDiv.children("div").eq(colIndex);
    let col = this.dataModel.columns[_colIndex];
    let colType = col.type.toLowerCase();
    if(colType=="select") {
      val = colDiv.find(colType).val();
    } else if(colType=="switch") {
      val = false;
      if(colDiv.find(".switch").attr("value")=="true") val = true;
    } else {
      val = colDiv.find("input").val();
    }
    if(val=="") {
      if(colType=="text" && (col.dataType=="int" || col.dataType=="float" || col.dataType=="money")) {
        if(col.dataType=="int") {
          val = 0;
        } else {
          val = 0.00;
        }
      }
    } else {
      if(colType=="text" && (col.dataType=="int" || col.dataType=="float" || col.dataType=="money")) {
        if(col.dataType=="int") {
          val = parseInt(val);
        } else {
          val = parseFloat(val);
        }
      }
    }
    return val;
  }

  /**
   * 设置指定单元格的值
   * @param {[type]} rowIndex  [description]
   * @param {[type]} _colIndex [description]
   * @param {[type]} val       [description]
   */
  setCellData(rowIndex, _colIndex, val) {
    let dataList = this._jqObj.find(".tfp-dataset-list");
    let rowDiv = dataList.find(".tfp-dataset-row").eq(rowIndex);
    let colIndex = _colIndex;
    if(this.dataModel.showCheckbox) colIndex++;
    let colDiv = rowDiv.children("div").eq(colIndex);
    let col = this.dataModel.columns[_colIndex];
    let colType = col.type.toLowerCase();
    if(colType=="switch") {
      if((val+"")=="true") {
        colDiv.find("div").css("float", "right");
        colDiv.find("div").css("background-color", "#0099ff");
        colDiv.attr("value", "true");
      } else {
        colDiv.find("div").css("float", "left");
        if(this._tfp.curPage.bgColorMode=="dark") {
          colDiv.find("div").css("background-color", "#666666");
        } else {
          colDiv.find("div").css("background-color", "#999999");
        }
        colDiv.attr("value", "false");
      }
    } else if(colType=="select") {
      colDiv.find("select").val(val);
    } else {
      colDiv.find("input").val(val);
    }
  }

  /**
   * 设置行数据
   * @param {[type]} rowIndex [description]
   * @param {[type]} rowData  [description]
   */
  setRow(rowIndex, rowData) {
    if(!rowData || !(typeof(rowData)=="object")) return;
    for(var i=0;i<this.dataModel.columns.length;i++) {
      let col = this.dataModel.columns[i];
      let colIndex = i;
      if(this.dataModel.showCheckbox) colIndex++;
      if(col.id in rowData) {
        this.setCellData(rowIndex, colIndex, rowData[col.id]);
      }
    }
  }

  /**
   * 获得指定行的div对象
   * @param  {[type]} rowIndex [description]
   * @return {[type]}          [description]
   */
  getRowDiv(rowIndex) {
    let dataList = this._jqObj.find(".tfp-dataset-list");
    return dataList.find(".tfp-dataset-row").eq(rowIndex);
  }

  /**
   * 获得指定单元格的div对象
   * @param  {[type]} rowIndex  [description]
   * @param  {[type]} _colIndex [description]
   * @return {[type]}           [description]
   */
  getCellDiv(rowIndex, _colIndex) {
    let dataList = this._jqObj.find(".tfp-dataset-list");
    let rowDiv = dataList.find(".tfp-dataset-row").eq(rowIndex);
    let colIndex = _colIndex;
    if(this.dataModel.showCheckbox) colIndex++;
    return rowDiv.children("div").eq(colIndex);
  }

  /**
   * 获得指定行的数据
   * @param  {[type]} index   [description]
   * @param  {[type]} options [description]
   * @return {[type]}         [description]
   */
  getRow(index, options) {
    let checkRequired = false;
    let onlyGetChecked = false;
    let autoFormat = false;
    if(options) {
      if(options.checkRequired) checkRequired = true;
      if(options.onlyGetChecked) onlyGetChecked = true;
      if(options.autoFormat) autoFormat = true;
    }
    let dataList = this._jqObj.find(".tfp-dataset-list");
    let rowDiv = dataList.find(".tfp-dataset-row").eq(index);
    let row = {};
    let checked = false;
    if(this.dataModel.showCheckbox && rowDiv.find(".tfp-dataset-checkbox").get(0).checked) {
      checked = true;
      row.checked = true;
    }
    if(onlyGetChecked && !checked) return {
      row: null,
      isCheckOk: true
    };
    for(var i=0;i<this.dataModel.columns.length;i++) {
      let col = this.dataModel.columns[i];
      let colIndex = i;
      if(this.dataModel.showCheckbox) colIndex++;
      let val = null;
      let colDiv = rowDiv.children("div").eq(colIndex);
      let colType = col.type.toLowerCase();
      if(colType=="select") {
        val = colDiv.find(colType).val();
      } else if(colType=="switch") {
        val = false;
        if(colDiv.find(".switch").attr("value")=="true") val = true;
      } else {
        val = colDiv.find("input").val();
      }
      if(val=="") {
        if(col.required && checkRequired) {
          let colName = col.id;
          if(col.name) colName = col.name;
          this._tfp.showMsg(colName+"不能为空！");
          if(colType=="text" || colType=="select" || colType=="password" 
            || colType=="number" || colType=="date"|| colType=="datetime") {
            colDiv.find(colType).focus();
          }
          return {
            row: null,
            isCheckOk: false
          };
        } else {
          if(colType=="text" && autoFormat && (col.dataType=="int" || col.dataType=="float" || col.dataType=="money")) {
            if(col.dataType=="int") {
              val = 0;
            } else {
              val = 0.00;
            }
          }
        }
      } else {
        if(colType=="text" && autoFormat && (col.dataType=="int" || col.dataType=="float" || col.dataType=="money")) {
          if(col.dataType=="int") {
            val = parseInt(val);
          } else {
            val = parseFloat(val);
          }
        }
        row[col.id] = val;
      }
    }
    return {
      row: row,
      isCheckOk: true
    };
  }

  /**
   * 获得所有行
   * @param  {[type]}   options [description]
   * @param  {Function} cb      [description]
   * @return {[type]}           [description]
   */
  getRows(options, cb) {
    let checkRequired = false;
    let onlyGetChecked = false;
    if(options) {
      if(options.checkRequired) checkRequired = true;
      if(options.onlyGetChecked) onlyGetChecked = true;
    }
    if(onlyGetChecked && !this.dataModel.showCheckbox) return [];
    let that = this;
    let rows = [];
    let isCheckOk = true; 
    let dataList = this._jqObj.find(".tfp-dataset-list");
    dataList.find(".tfp-dataset-row").each(function(index) {
      let ret = that.getRow(index, options);
      if(!ret.isCheckOk) {
        isCheckOk = false;
        return false;
      }
      if(ret.row) rows.push(ret.row);
    });
    if(!isCheckOk) return;
    if(cb) {
      cb(rows);
    } else {
      return rows;
    }
  }

  /**
   * 求指定列的合计值
   * @param  {[type]} colName [description]
   * @return {[type]}         [description]
   */
  sum(colId) {
    let ret = 0;
    let colIndex = 0;
    let dataType = "text";
    for(var i=0;i<this.columns.length;i++) {
      let col = this.columns[i];
      if(col.id==colId) {
        colIndex = i;
        if(this.dataModel.showCheckbox) colIndex++;
        if(col.dataType) dataType = col.dataType;
        break;
      }
    }
    let that = this;
    let dataList = this._jqObj.find(".tfp-dataset-list");
    dataList.find(".tfp-dataset-row").each(function(index) {
      let cellVal = $(this).children().eq(colIndex).find("input").val().trim().replaceAll(",", "");
      if(cellVal!="") {
        if(dataType=="int") {
          if(isInt(cellVal)) ret += parseInt(cellVal);
        } else if(!isNaN(cellVal)) {
          ret += parseFloat(cellVal);
        }
      }
    });
    if(dataType=="money") {
      ret = this._tfp.formatMoney(ret);
    }
    return ret;
  }

  /**
   * 绑定数据
   * @param  {[type]} data [description]
   * @return {[type]}      [description]
   */
  bindData(data) {
    this.rows = data;
  }

  /**
   * 加载数据
   * @return {[type]} [description]
   */
  loadData() {
    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;
    }

    let that = this;
    //与服务组件建立绑定
    if(!serviceCpt.bindCpts) serviceCpt.bindCpts = [];
    if(!serviceCpt.bindCpts.contains(this.id)) serviceCpt.bindCpts.push(this.id);
    serviceCpt.status = 0;
    serviceCpt.request(null, function(req, res) {
      var data = res[that.dataModel.dataBindingMember];
      if(!data) return;
      if(data.pageSize && data.rows) {
        that.bindData(data.rows);
      } else {
        that.bindData(data);
      }
    });
  }

  initDesigning() {
    this.bindScrollEvent();
  }

  /**
   * 初始化运行时
   * @return {[type]} [description]
   */
  initRuntime() {
    let that = this;
    
    //绑定添加按钮的点击事件
    this._jqObj.find(".tfp-dataset-button-add").click(function() {
      that.addRow();
    });

    //绑定打开对话框添加按钮的点击事件
    this._jqObj.find(".tfp-dataset-button-add-from-dialog").click(function() {
      if(isNull(that.dataModel.addFromDialogPath)) {
        that._tfp.showMsg("请设置弹窗页面路径！");
        return;
      }
      let width = "640px";
      let height = "480px";
      if(that.dataModel.addFromDialogWidth) width = that.dataModel.addFromDialogWidth+"";
      if(width.indexOf("px")<0) width += "px";
      if(that.dataModel.addFromDialogHeight) height = that.dataModel.addFromDialogHeight+"";
      if(height.indexOf("px")<0) height += "px";
      that._tfp.openDialog(that.dataModel.addFromDialogButtonText, 
        that.dataModel.addFromDialogPath, width, height, null, function(ret) {
          if(ret) {
            if(Array.isArray(ret)) {
              for(let i=0;i<ret.length;i++) {
                that.addRow(ret[i]);
              }
            } else {
              that.addRow(ret);
            }
          }
        });
    });
    
    //要在这里判断一下，否则有些情况会造成重复绑定事件
    if(!this.isBindEventHandler) {
      this.bindEventHandler();
    }

    this.loadData();

    //设置计算列关联的列，以便当关联列的数据发生变化时，自动执行计算列的值
    if(this.dataModel.columns) {
      //存在关联计算的列
      this.calcCols = {};
      for(var i=0;i<this.dataModel.columns.length;i++) {
        let col = this.dataModel.columns[i];
        //如果是计算列
        if(col.formula) {
          let arr = col.formula.match(/\{[\w]+\}/g);
          if(arr.length>0) {
            for(var j=0;j<arr.length;j++) {
              for(var k=0;k<this.dataModel.columns.length;k++) {
                let colR = this.dataModel.columns[k];
                //如果当前列与计算列有关联，则标示为计算关联列
                if(("{"+colR.id+"}")==arr[j]) {
                  if(!this.calcCols[colR.id]) {
                    this.calcCols[colR.id] = [];
                  }
                  if(!this.calcCols[colR.id].contains(col.id)) 
                    this.calcCols[colR.id].push(col.id);
                }
              }
            }
          }
        }
      }
    }
  }
}