JSTable开发手册 v1.0 beta.doc

JSTable开发手册1.0 beta目 录目 录11 什么是JSTable22 我能用JSTable做什么23 开发指南23.1 引入.js文件23.2 创建要操作的TABLE23.3 创建JSTable实例并初始化33.4 增加一行明细并设置数据43.5 删除选中行43.6 列计算功能的调用53.6.1 计算方法调用说明53.6.2 参与自动计算的数据是什么53.6.3 表格发生变化时重新计算的时机64 JSTable 1.0尚未实现的功能61 什么是JSTableJSTable是一个JavaScript类，是为了实现简洁的动态操作table明细体而开发的，提供了一些基本的增、减行，以及计算等功能。2 我能用JSTable做什么首先，JSTable允许开发者将已经创建的table对象初始化为一个JSTable的实例，并根据偏好制定表格明细体的CSS样式。而不会帮助开发人员创建一个新的table。在JSTable的应用场景中，可能最多被使用的，是在开发者自己的代码中，调用JSTable内置的方法，对表格进行增加行（及数据）、删除行的操作。同时，JSTable也提供了列计算的方法，用以辅助开发人员实现列的合计、取平均值。3 开发指南3.1 引入.js文件在页面中需要先引入JSTable的库文件才可以调用3.2 创建要操作的TABLE选择编号姓名性别级别平均-事实上，只要是拥有一对标签，且为该table指定了ID，JSTable就可以对其进行操作。但实际的业务场景中，一般都需要有一个标题行，有时在表尾还会有合计行。总之，对于表格中上下两端非明细体的固定行，应包含在原TABLE中，JSTable是无法创建的。3.3 创建JSTable实例并初始化/创建JSTable实例var jsTB = new JSTable();/初始化jsTB.initTB(document.alldemoTable,1,1,tr1,tr2,tr3,tr4);/设置点击行时，是否自动选择本行的第一个radio。默认为false，必须点击radio。jsTB.setClkTr2Radio(true);本例中，创建JSTable实例jsTB后，还需调用initTB方法，对jsTB进行初始化设置。initTB方法包含7个参数，依次为：table对象上预留行数下预留行数明细行样式1明细行样式2明细行鼠标经过样式明细行点击样式其中，上下预留行数，是指非明细体的固定行部分，本例中在创建TABLE时上下各有一行，不输于明细体。明细行样式1、2，是为了美观而为明细的单双数行设置的不同CSS样式；明细行鼠标经过样式，是指鼠标经过某行时变化CSS样式；明细行鼠标点击样式，是指鼠标点击某行时变化的CSS样式。（可选）通过setClkTr2Radio方法，我们可以设置单击某一行时，是否自动选中该行中的radio单选项。默认不设置时，该属性为false（注：如果该行存在radio，将自动选中且仅选中该行中的第一个radio。）3.4 增加一行明细并设置数据首选我们需要创建一个Array的数值数组，用以对应新增行各单元格的值，数组中的值可以为html代码，以便我们增加一些其他的html元素。var valArray = new Array();valArray0=;valArray1=0001;valArray2=张飞;valArray3=男;valArray4=150;然后即可调用addTr方法，将数组行加入表格。jsTB.addTr(valArray);需要注意的是，数组的长度可能不与预设的表格列数一致，因此会使得添加的行中列数不足或超出，表格因此变得不整齐。JSTable认为这种情况是正确且允许的。3.5 删除选中行是否允许进行删除行操作，JSTable中是需要判断前提的：如果当前选中行中存在radio，JSTable才认为该行是可操作的，才可以删除。jsTB.delSingleRow(必须先选择要删除的人物！);在业务代码中进行删除时，仅调用JSTable的delSingleRow方法即可，参数是未选择任何行时的提示信息。3.6 列计算功能的调用3.6.1 计算方法调用说明JSTable提供了一个内置的列计算方法：computeCol (colNo, m_method, decimal)参数意义依次为：列号、计算方法（1-合计 0-平均）、保留小数位数该方法会自动忽略初始化JSTable实例时，设置的上下预留行。例如，为某个TD对象设置内容为某列的平均值：document.alltd_id.innerText = jsTB.computeCol(4,0,2);又如，为某个INPUT对象设置内容为某列合计值：document.allinput_id.value = jsTB.computeCol(5,1,2);3.6.2 参与自动计算的数据是什么JSTable获取数据的机制是这样的：1 定位每一行的指定列对应的单元格；2 查找单元格中是否有INPUT标签（仅取第一个），如果有则取其值；如果没有则取当前单元格的innerText；3 对取到的值进行计算。所以，对于input项和单纯的数字文本，无论指定列、单元格中是否仅有一种或兼而有之，仍然是可以按照上述规则正确计算的。注：select对象尚未处理。3.6.3 表格发生变化时重新计算的时机当本列发生变化，如增减行或个别数据改变时，是需要重新进行计算的。目前JSTable没有内置对这种情况的处理。对于直接操作引起的变化，比如增加、删除，需要自行实现增删的方法，调用JSTable的增删方法的同时也再调用重新计算。例如：/实现自己的删除行方法function del()/调用JSTable的删除行方法jsTB.delSingleRow(必须先选择要删除的人物！);/如果有需要重新计算等操作，再调用setAverageLevel(jsTB);/实现计算平均级别的方法function setAverageLevel()/调用JSTable的计算方法document.allaveragelevel.innerText = jsTB.computeCol(4,0,2);而对于间接引起的变化，如某个