❤
npm
Sign UpSign In

hchandson

1.0.3 • Public • Published

hc-handsontable 使用文档 v2020.10.09

Hchthelper Hc.handsontables.helper.js data-target="hthelper-selector" 选择器样式改变

var instance = this //主程序对象 , priv = {} //私有属性集合 , view = {} //html视图集合 , colformatVal = [] //保存行/列函数各参数的值 , defaultSettings = { //默认配置参数 data : [], //表格中所显示的内容集合二维数组 colHeaders : true, //是否显示行号1,2,3,4... rowHeaders : true, //是否显示列号 a,b,c,d... minSpareRows: 1, //最小显示空白行数 minSpareCols: 1, //最小显示空白列数 colWidths:[], //列宽集合 colFormats :[], //行/列函数 excelDownload: 'common-exportHtmlToExcel.action', //excel下载 excelImportData: 'common-doUpload.action', //excel导入 autoWrapRow: true, //manualColumnMove: true, manualColumnResize: true, //persistentState: true, //缓存？ currentRowClassName : 'currentRow', currentColClassName : 'currentCol', contextMenu : { //右键菜单 items : { "row_above" : { 'name':'添加上一行' }, "row_below" : { 'name':'添加下一行' }, "row_above_zbgroup" : { 'name':'添加上一行(指标分组)' }, "hsep1" : "---------", "col_left" : { 'name':'添加左边列' }, "col_right" : { 'name':'添加右边列' }, "col_left_zbgroup" : { 'name':'添加左边列(指标分组)' }, "hsep2" : "---------", "remove_row" : { 'name':'删除行' }, 'remove_col' : { 'name':'删除列' }, "hsep3" : "---------", 'make_read_only' : {}, 'merge':{}//, //"hsep4" : "---------", //'copy':{}, //'paste':{}, //"hsep5" : "---------", //"hsep6" : "---------", //'redo' : {name:'撤消'}, //'undo' : {name:'还原'} } }, mergeCells:[], //合并单元格 afterLoadData : function(change,source){}, //基本没用。 /************** 工具栏 hchthelper *****************/ toolbar : { //工具栏 type : 'all', //type=all显示所有工具 type=mini自定义显示 flag : true, //影响工具栏中 公式函数 指标分组 显示及隐藏 selectedIndex : 1, //选中下标 menu : [ //需要显示的一级二级菜单 {'start' : [['save','download','print']]},//,'import48' {'basics' : ['print','clearformat', ['family', 'size', 'weight', 'tilt', 'underlined', 'strike', 'bcolor', 'color', 'border'],['setformat','checkformat','searchall', 'validitydata'/,'selector'/],['align', 'vertical','merge', 'readonly'],['row', 'col'],['zbgroup', 'tableskin','fixed','theight','stretch', 'calculation', 'columnnum', 'randomtable', 'otherfetching']]}, //{'chart' : [['bar','line','pie','bar2','area','scatter','other']]}, {'temp' : ['importdata']} ], secondMenu : { 'zbgroup' : ['zb','group','area2','contrast','datetime', 'timecode', 'indExplain'],//'qb' 'setformat' : ['number'], 'checkformat' : ['formatlist'], //'allformat' : ['aformatlist'], 'validitydata' : ['dformat','func'], 'autofetching' : ['autofzb','autoftq','autofother'], 'import' : ['impcol'], 'importdata' : ['importdata2'], 'tableskin' : ['tableskin2'], 'theight' : ['theight2'], 'save' : ['save2'], 'selector' : ['webuploader', 'checkbox', 'radio'/, 'checkbox', 'radio', 'calendar', 'dropdown', 'dynamicdrop', 'commoncode'/] }, thirdMenu : { 'number' : ['normal','decimal','money','date','abs','other2', 'tihuan'],//,'selector' 'dformat' : ['any','num','integer','decimal2','date2','length'/,'mobile','phone','email','post'/], 'tableskin2' : ['none', 'default', 'hz', 'fixednum'] }, miniMenu : ['save', 'download', 'print', 'stretch', 'calculation'] }, maxRowNum : 0, //初始化最大行数 默认为0

        	/***************** 用户可操作表格权限 hchthelper */
        	power : {
        		number : 1,               //用户操作权限 暂时1为普通用户权限
				coords : [0,0,20,5]       //原table的所有坐标 用于 用户权限这块(不可编辑)。
        	},
        	fixed : true,                 //菜单栏是否固定在窗口顶端
        	//columnSorting : false,      //排序
        	hchthelper : instance,        // hchthelper对象
        	saveTableView : null,         //保存事件
        	autoCalculation : false,      //是否自动计算
        	//stretchH : 'last',
			aaa : 1
	  }
	  , miniDefaultSettings = { //mini模式默认配置
	  		colHeaders : null,
			rowHeaders : null,
			minSpareRows: 0,
			minSpareCols: 0,
			contextMenu:null

	  }

settings.mergeCells = []; //合并单元格 settings.colWidths = [40,100,200]; //列宽 settings.toolbar = null; //工具栏 settings.stretchH = 'all'; //表格拉伸 settings.theight = 32; //行高 settings.tableskin = 'fixednum'; //皮肤 settings.filledcformat = true; //设置格式 填充内容后清除格式 settings.saveTableView = function(){HChthelper.saveParams(true);} settings.fixed = false; //固定 settings.autoCalculation = false; //是否自动计算(编辑单元格计算) settings.showZbGroup = true;//mini模式下是否显示指标分组。 settings.fixedRowsTop = 1; //固定单元格行号 settings.fixedColumnsLeft = 1; //固定单元格列号 settings.isSelectEdit = false; //是否允许编辑 settings.prevDatas = {prev1: {}, prev12: {}}; //上一期去年同期数据 settings.data = [[]]; //表格显示的数据

/**

  • styleData 数组下标的含义 style样式 ''、undefined为默认值无样式
  • 索引0 只读 设置 0/1
  • 索引1 加粗 设置1加粗
  • 索引2 倾斜 设置1倾斜
  • 索引3 下划线 ......
  • 索引4 垂直对齐 设置为t=top,m=middle,b=bottom
  • 索引5 水平对齐 设置为l=left,c=center,r=right init
  • 索引6 字号 实际设置的值
  • 索引7 字体 ......
  • 索引8 文本颜色 ......
  • 索引9 背景色 ......
  • 索引10 边框 [border-width|border-style|border-color] */ settings.styleData= [[{}]]; //样式

settings.ruleData=[[{}]]; //规则 指标分组： zb(指标) 指标只允许设置一个 id, name, unitid, unitname Group(分组) 交叉分组叠加可以设置3个分组 id,name,grouptype area2(地区) 最多一个 id,name contrast(对比项) 最多一个 id,name datetime(时间偏移量) 最多一个 id,name timecode(期别) 最多一个 id,name indExplain(指标解释) 最多一个 id,name

this.menu = [ {'start':['download','print','improt48']}, {'basics':['familys','aligns','zbgroup',['clearformat','setformat','checkformat','allformat'],'data',['autofetching','import'],'nf',['insertCol','removeCol'],['readonly','clearreadonly']]}, {'chart':[['bar','line','pie','bar2','area','scatter','other']]}, {'temp':['importdata']} ];

指标分组 横向竖向填充说明

横向 说明

选中单元格
分组 、地区 、 对比项 相同。 将选中的顺序 填满选中单元格的第一行 也就是所有第一行的指标、分组…都是一样的。 这里就是填充的 指标 （日照时数） 以此第二行将填充 （城市建设用地面积）

竖向 根据 横向的规则，填充选中单元格的第一列 第二列….

如果没有选择。 则横向根据单元格一个一个赋值 ：选中单元格 第1行第1列： 指标：（日照时数） 第1行第2列（城市建设用地面积）… 注：选中单元格大于所选择数据时，数据将会根据选中单元格循环重复填充，只至填满。

指标分组调用第三方的插件(我们组件库中的muiltSelectForEditor.js) 报表工具提供Hc.controller.psZbgroup接口获取数据。

数据有效性-设置 忽略空值 表示允许单元格为空 是否必须审核 表示在填报页面上 如果 某单元格设置了某个规则，此规则必须通过才能进行保存

类型： 设置 单元格允许输入的格式 数字、整数、小数、日期、文本长度… 比较： 表示 单元格允许输入的范围

数据有效性-设置 是否必须审核 同设置 表达式： 支持范围判断，JS语法格式，自动解析 A1+B1>C1 例如： A1+100>b1; a1+b1<c1+d1; a1<b1&&a1>c1; a1>b1||a1<c1; 注：不需要分号的
备注： 用户自定义提示信息

设置和公式是一起设置的， 设置对所有选中单元格有效。 公式只对 公式最先出现的某个单元格进行设置 例如：a1+b1>c1 公式用保存在 ruleData a1单元格中，单元格可以设置多个公式，但不能设置 多个 数据有效性-设置

保存 验证数据有效性

保存需要初始化handsontable的时候 配置自定义事件saveTableView $('#example').HChtHelper({ ‘data’ : data, ‘saveTableView’ : saveView });

未通过审核将在页面右上角弹出 错误信息

必须审核 为 是 将不显示确定按钮，报表无法保存成功。 操作栏 选中 是指 选中当前出错的单元格

更改后 自动出现确定 按钮

在警告状态下，是可以保存成功的。 如果没有错误，不弹出弹出框，自动提交。 调用 需要审核的保存方法 handsontable.helper.js 对象 this.controller.save(); 暂存则直接调用 页面的保存方法

模版-EXCEL导入 uploadify控件说明 IE10 IE11中可能会出现控件无法初始化的情况， 请升级adobe flash player for IE 地址：http://rj.baidu.com/soft/detail/17153.html?ald

设置单元格内容 Hc.map.setDataAtCell(row, col, value); 获取单元格内容 Hc.map.getDataAtCell(row, col); //设置单元格属性 /**

  • 设置某列的属性值
  • @param {Int} row 行
  • @param {Int} col 列
  • @param {String} prop 属性名称
  • @param {String} value 属性值
  • @param {String} prevProp 样式styleData/规则ruleData 默认ruleData / Hc.map. setColumnProp(row, col, prop, value, prevProp); /*
  • 获取某列的属性值
  • @param {Int} row 行
  • @param {Int} col 列
  • @param {String} prop 属性名称
  • @param {String} prevProp 样式styleData/规则ruleData 默认ruleData */ Hc.map.getColumnProp(row, col, prop, prevProp);

/**

  • 设置单元格选中状态 选择多个单元格 只显示左上角被选中单元格
    • @param {Array} corners 选中单元格坐标 */ Hc.setCellSelectionState(corners, td);

/**

  • 选中单元格 自定义指标解释

*/ Hc.popupSelectedIndExplain(row, col, td, ev);

/**

  • 选中单元格 指标分组

*/ Hc.popupSelectedZbG(row, col, td, ev);

计算公式 目前支持的函数：SUM/MIN/MAX/IF/REP/RANK/PRODUCT/AVERAGE/COUNT/ABS 支持大多数excel公式计算。 =sum(a1+b1); =sum(#1a1+a1); =sum(a1:a2); =a1+a2; =if(a1>b1,c1,d1); if函数比较公式是js的，不是excel and or =if(a1>b1,c1,if(c1>d1, e1,f1)); 这里理论上支持无限if嵌套 =rank(b1, b1:b8, 1); 默认升序 = 1 降序 = 0 =rank(b1, (b1,c1,c2,e3,f4,h5), 1); 默认升序 = 1 降序 = 0

计算公式除数不能为0 Hc.map.setManualCalculation(); //计算公式执行方法。 主要程序设计： 首先会把单元格中的计算公式统一出来保存在数组中。 然后正/倒序循环数组，比对计算的结果是否相同，相同就返回数据。 不相同会再次计算，比对计算结果。。。 (正/倒序循环：单元格公式保存在数组中是正序循环表格的，可能有的计算公式有关联或者不是正序添加的公式这样会导致计算的结果有问题，正/倒序循环就用来比对计算结果。相同则返回。) 支持跨表计算 #1D12: #1=上一期 D12是表格中的坐标。 这里表示 上一期D12单元格 #1D1: #12=去年同期 D1是表格中的坐标。 这里表示 去年同期D1单元格

$c$2 拖动单元格时，$c$2不会改变。 $c$2 == c2

D2会根据单元格自动增加减少。 计算公式主要用到的函数： /**

  • 解析函数
  • @param {String} formula 公式
  • @param {Function} callback 获取当前数据单元格的值
  • @param {Function} prevCallback 获取往期数据单元格的值 */ HChtHelper.Common.setFormula(formulas, callback, prevCallback);

/**

  • 解析函数
  • @param {String} formula 公式
  • @param {Function} callback 获取当前数据单元格的值
  • @param {Function} prevCallback 获取往期数据单元格的值 / HChtHelper.Common.switchFormula(funcname, fexec, callback, prevCallback, formulas); 计算公式注意事项： 因为是js进行计算的，有些数字计算不出来，可能会出现错误。 (这个是系统的问题) 包括eval函数等都会有计算错误的情况出现。 目前通过CalcEval对象重置eval函数处理eval计算有误的情况。 计算过程中出现的长小数15.000000000000000000001 14.999999999999999999999999等这种情况通过 /*
  • JS计算出现长小数时 四舍五入
  • @param {Number} num 数值/数组
  • @param {Number} 小数位 */ HChtHelper.Common.setNumbertoFixed2(num ind);函数来作处理。

Jquery.handsontable.full.js //这是第三方的插件,我们的使用的版本是0.10.5 该版本支持IE8及以上浏览器。 我在里面加了些我们需要用到的代码，来用解析保存我们自己的功能。 可以搜索关键字 “hchthelper” 样式/排版/规则/内容等基本是通过此方法来加载解析单元格的。 Hc.descriptionRenderer(handsontable, td, row, col, prop, value,cellProperties); 右键只读/取消，合并/取消等等。

Readme

Keywords

Package Sidebar

Install

npm i hchandson

Weekly Downloads

1

Version

1.0.3

License

ISC

Unpacked Size

4.4 MB

Total Files

142

Last publish

Collaborators

  • hejia1992
Try on RunKit
Report malware