GoExcel(一)

最新推荐文章于 2024-08-19 10:26:02 发布

飞天代码

最新推荐文章于 2024-08-19 10:26:02 发布

阅读量744

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/weiyongliang_813/article/details/49943997

版权

javascript 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

最近做一个结算项目时，牵涉到大量的金钱结算业务，由于用户习惯了excel操作，要求系统的许多界面要类似excel，保证他们的操作、查看习惯。先上图，比如下面这图就是给领导审批的一个开票申请单：

这里写图片描述

在设计之初有同事就设计成平铺的表格：如图
这里写图片描述

后面再实际过程中，发现这种设计根本没法达到用户的要求，原因就是承包商是不确定的，有可能是2个也可能是n个，说白点就是运输费销售额100万，并不是一定是一个公司来完成，所以平铺表格满足不了需求。
有考虑采用分表格的方式，来实现，也就是我们常说的主从表的方式，但信息展示又不直观，还是被否定了。

只能痛下决心自己来写这个控件咯：
效果如图：
这里写图片描述

其实就是写了个绘画表格的小控件，
比如生成第一行代码如下：

  excelTable = new GoExcelTable(options);
  var rowObj = excelTable.attachRow({border: "row_b_solid"});
    rowObj.addInputCell(
    {width: "50%",cellBorder: "cell_r_dashed",label: "申请内容：",inputWidth: "75%",id: "applyContent",labelWidth: "65px"}
    );
    rowObj.addInputCell({width: "50%", label: "承包商发票号码：", inputWidth: "350px", id: "inNo", labelWidth: "105px"});

思路其实就是产生一个goExcel对象，该对象可以通过attachRow来生成一行，再通过row来生成2个cell ，设置cell的相应属性来完成第一行的绘制。
效果：
这里写图片描述

比如绘制第二行代码：

//生成一行，指定行高为2行，设置边框样式row_b_solid
  var rowObj = excelTable.attachRow({id: "dynamicRow", rowSpan: 2, border: "row_b_solid"});
  //行中生成一个单元格 指定行高为2行 
   rowObj.addLabelCell({label: "客户", rowSpan: 2, border: "cell_r_dashed", id: "customerLabelCell"});
   //生成一个空cell
    var cellObj = rowObj.addEmptyCell({width: "300px", id: "customerContentCell"});
    //空cell里面再激活1行
    var rowObjOne = cellObj.attachRow({border: "row_r_dashed"});
    //行里面再生成相应的输入框cell
    rowObjOne.addInputCell({label: "名称", id: "customerName", inputWidth: "220px", border: " cell_r_dashed"});
    var rowObjTwo = cellObj.attachRow({border: "row_r_dashed"});
    rowObjTwo.addInputCell({label: "税号", id: "applyContent", inputWidth: "220px", border: " cell_r_dashed"});

效果如图：
这里写图片描述

当然会觉得这么做太过于复杂，每个地方都需要一个一个绘制，跟写html代码没有区别。前面写的单元格cell由于是固定单个插入的，只能单个绘制，但对于有规律单元格的就不需要这么复杂的来绘制咯。
比如红色标记的这种
这里写图片描述
生成的话就不需要一个一个单元格去汇总
代码如下：

//表格中产生一个空cell，*号表示剩余宽度
  var invoiceCell = rowObj.addEmptyCell({id: "invoiceCell", width: "*"});
  //cell里面生成一行
    var headerRow = invoiceCell.attachRow({border: "row_b_dashed"});
    //行里面绘制多个列
    headerRow.addItems(
        [
            {label: "项   目", type: "label", id: "applyContent", border: " cell_r_dashed", width: "300px"},
            {label: "金额", type: "label", id: "applyContent", border: " cell_r_dashed", width: "120px"},
            {label: "税率", type: "label", id: "applyContent", border: " cell_r_dashed", width: "120px"},
            {label: "税额", type: "label", id: "applyContent", border: " cell_r_dashed", width: "120px"},
            {label: "价税合计", type: "label", id: "applyContent", border: "", width: "*"}
        ]
    )