tssJS API

tssJS

tssJS工具方法

tssJS.isFunction(obj)  是否函数
tssJS.isArray(obj)     是否数组
tssJS.isWindow(obj)    是否window对象   
tssJS.type(obj)        获取对象类型: Boolean Number String Function Array Date RegExp Object 
tssJS.isEmptyObject(obj)        是否空对象
tssJS.parseJSON(data) 字符串转JSON对象(JSON.parse要求数据必须用双引号)。反序列化是JSON.stringify(obj)
tssJS.parseXML(data)  字符串解析XML Doc
tssJS.globalEval(data)  把一段脚本加载到全局context(window)中
tssJS.execCommand(callback, param)  执行callback函数(callback可以是Function或JS字符串)
tssJS.each(object, func, args)  遍历对象或数组
tssJS.trim(txt)  过滤开头和结尾的空格
tssJS.grep(data, grepFunction)  过滤数组,返回新数组;grepFunction返回true时保留
tssJS.cache.Variables/ XmlDatas 缓存页面数据(xml、变量等)
tssJS.getUniqueID(prefix)  负责生成对象唯一编号
tssJS.now(format)  获取当前时间戳, format ? yyyy-MM-dd hh:mm:ss : long
tssJS.encode(info, key)、tssJS.decode(info, key)、tssJS.hashcode(info, key) 
tssJS.isIE, tssJS.isChrome, tssJS.isFirefox, tssJS.isWebKit, tssJS.supportCanvas, tssJS.isMobile
Array.each(fn, args)、Array.contains(item)、Array.remove(item)
Date.format('yyyy-MM-dd hh:mm:ss')
$1(id)、$$(id) 

tssJS原型方法

find(selector, parentEL):  tssJS("#div1").find("a")
css(attr, value)
hasClass(className)、addClass(className)、removeClass(className)、removeClasses(classNames)
html() : 设置element的innerHTML,tssJS("#title").html("<b>XXX</b>");
            如果参数为空,则取当前Element已有的innerHTML
text() : 设置element的innerText,tssJS("#title").text("XXX");
            如果参数为空,则取当前Element已有的innerText
appendChild(el): 将参数指定的Element添加到当前Element下,作为子节点
remove(): 将当前节点从其所在的父节点下移除
title(str): 设置element的title属性
click(func): 为element添加单击事件处理方法
hover(over_fn, out_fn): 设置鼠标移入、移出事件监听方法
toggle([fn1,fn2....]):  设置点击轮流切换方法
blur(fn): 为Element添加失去焦点后监听方法
addEvent(eventName, fn, capture):添加事件监听方法
removeEvent(eventName, fn, capture):移除事件监听方法
focus(): 将焦点聚到当前的节点上
show(block): 显示某个原本隐藏的Element,block=true,则以块级的形式显示
hide(): 隐藏当前Element
center(width, height): 使Element居中显示
position(left, top): 设置
attr(name, value): 为元素设置属性/值
value(): 获取表单类Element(input、radio、checkbox等)的value值

tssJS Dom工具方法

tssJS.radioValue(name): 获取checked单选输入的值
tssJS.hasClass(el, cn): 判断Element是否包含某个class
tssJS.getInner(): 获取Element的长宽
tssJS.getStyle(el, attr):   获取CSS样式值,注:computedStyle: style 和 runtimeStyle 的结合
tssJS.absPosition(el): 获取element的绝对位置,return {"left": l, "top": t, "right": r, "bottom": b}
tssJS.createElement(tagName, className, id): 创建一个新的Element,可指定class和id
tssJS.createNSElement(tagName, ns): 创建一个新的带命名空间Element,如<Grid: row/>
tssJS.getNSElements(el, tagName, ns): 查找element下带命名空间的子节点
tssJS.removeNode(el): 将节点从其所在的父节点下移除,等价于 tssJS(el).remove()
tssJS.createScript(script): 动态添加脚本片段
tssJS.createScriptJS(jsFile): 动态添加外挂js文件
tssJS.setOpacity(el, opacity): 设置el透明度
tssJS.showWaitingLayer(): 展示网页遮罩层
tssJS.hideWaitingLayer(): 隐藏网页遮罩层

tssJS Query/Cookie/Event

tssJS.Query.get(name, decode):  decode=true,对参数值(可能为中文等)进行编码
tssJS.Query.init(queryString):  可单独指定,默认使用 window.location.search.substring(1)
tssJS.Cookie.setValue(name, value, expires, path): 
  注:Chrome只支持在线网站的cookie的读写操作,对本地html的cookie操作是禁止的
tssJS.Cookie.getValue(name):
tssJS.Cookie.del(name, path):
tssJS.Cookie.delAll(path):

tssJS.Event.addEvent(el, eventName, fn, capture): 同一事件多次添加,不会彼此覆盖,将会多次触发
tssJS.Event.removeEvent(el, eventName, fn, capture):
tssJS.Event.cancel(event):
tssJS.Event.getSrcElement(ev): 获得事件触发所在源Element
tssJS.Event.setCapture(srcElement, eventType):  使事件始终捕捉对象。设置事件捕获范围。
tssJS.Event.releaseCapture(srcElement, eventType): 使事件放弃始终捕捉对象
tssJS.Event.cancelBubble(event): 阻止事件向上冒泡
tssJS.EventFirer(el, eventName).fire():
 

tssJS XML

tssJS.XML.toNode(xml) : 将字符串转化成xml节点对象
tssJS.XML.toXml(node) : 
tssJS.XML.toString(node) : 
tssJS.XML.getText(node) : 
tssJS.XML.setText(node, textValue) : 
tssJS.XML.EMPTY_XML_DOM : 返回一个空的xmlDom
tssJS.XML.createNode(name) : 
tssJS.XML.createCDATA(data) : 
tssJS.XML.appendCDATA(name, data) : 
tssJS.XML.getCDATA(pnode, name) : 
tssJS.XML.setCDATA(pnode, name, value) : 
tssJS.XML.removeCDATA(pnode, name) : 
tssJS.XML.getParseError(xmlDom) : 获取解析错误

tssJS AJAX

tssJS.ajax({
    url : url,        // 请求地址
    method : "GET",   // HTTP类型,默认 POST
    headers : {......},  // 
    params  : {......},
    exEmpty: true,       // 剔除值为空的参数,默认true(注:适合查询类参数过滤,写操作时需注意清空字段值的情形)
    ondata : function() { },  // json格式数据响应
    onexception : function() { },
    onsuccess : function() { }
});

快捷写法:
tssJS.getXML (url, params, callback, method)
tssJS.getJSON(url, params, callback, method)  // mehtod: 默认为POST
tssJS.get(url, params, callback)    // GET  JSON
tssJS.post(url, params, callback)   // POST  JSON
tssJS.delete(url, params, callback) // DELETE  JSON

JSONP 跨域调用:
tssJS.JSONP.getJSON(
      "http://www.boubei.com/tss/data/jsonp/GetAllVisitors",    // 注意是data/jsonp/, 区别data/json/
      {'param1': 'hello jsonp!'}, 
      function(result) { console.log(result); }
 );   
 

tssJS UI

Grid

初始化Grid:
tssJS.G("grid", data) 或  tssJS("#grid").grid(data) : data为xml格式数据
tssJS.G("grid") : 获取Grid对象    

Grid支持的事件有:
onLoad, Grid更新加载完成后触发, 配置方法: $("#grid").attr("onLoad", "f1()");

Grid原型方法:
grid.load(data, append)
grid.getRowByIndex(curRow) : 根据页面上的行序号,获取相应的Row对象  
grid.getColumnValue(colName) : 获取选中行中指定列的值 
grid.getColumnValues(colName) : 获取所有行某一列的值 
grid.insertRow(map) : 新插入一行
grid.deleteRow(row) : 删除单行
grid.deleteRowByIndex(index) : 根据页面上的行序号,删除行 
grid.deleteSelectedRow() : 删除当前选中行 
grid.modifyRow(row, attrName, value) : 更新单行记录的某个属性值  
grid.modifyRowByIndex(rowIndex, attrName, value) :    
grid.getHighlightRow(index) : 获取设置为高亮的行
grid.getCheckedRows() : 获取选中行的ID,返回字符串(逗号分隔的id列)  
grid.getCheckedRowsValue(field) : 获取选中行某一列的值,返回数组 

其它:
tssJS.delGridRow(ajax_url, "grid") : 删除选中行,同时删除其对应数据库记录  

Form

初始化Form:
<div id="form1"/>

1、tssJS.F("form1", data) 或  tssJS("#form1").form(data) : data为xml格式数据
2、tssJS.F("form1") : 获取Form对象   

Form支持的事件有:
1、form submit时,自动触发 checkForm(), 如果是按钮触发提交,则需要单独调用 checkForm()来完成检测,如:
  function saveUser() {
      var userForm = $.F("userForm");
      if(  !userForm.checkForm() ) {
          return;
      }
    ......
  }

Form原型方法:
1、checkForm() : 提交时检查字段输入值是否都符合要求,每个字段都可以设置单独的校验正则
2、setEditable(status): false 禁止编辑表单,隐藏保存按钮  true 运行编辑表单
3、setFieldEditable(name, status) : 设置某个字段输入框是否可编辑
4、getData(name) : 获取字段当前输入值
4、updateDataExternal(name, value) : 更新字段值,并触发Form的ondatachange事件
5、updateData(el) : 将界面数据更新到Form模板的data/row/里, 通常和 updateDataExternal一起使用
6、showCustomErrorInfo(name, msg) : 在字段输入框上显示自定义的提示信息
7、updateField(name, attrs) : 更新字段配置,示例:
    form.updateField("center2", [
                        {"name": "mode", "value": "combotree"},
                        {"name": "texts", "value": texts.join('|')},
                        {"name": "values", "value": values.join('|')}
                    ])  //  动态更新下拉树

json2Form:
json2Form支持将json格式的form配置信息转化为Form表单,典型用法record和report的配置解析。
1、tssJS.json2Form(formId, defines, buttonBox, customizeJS)
2、tssJS.getNextLevelOption(form, currLevel, currLevelValue, service, nextLevel) : 多级下拉选择联动
3、tssJS.funcCompare(func1, func2) : 判断方法是否相等
4、tssJS.transDay(day, mode) : 将today-x or today+x转换成具体日期

Tree

初始化Tree:
树控件支持单选和多选,声明方式分别如下:
<Tree id="tree1" treeType="single" moveable="true"/>  
<Tree id="tree2" treeType="multi" selectSelf="false"/>

/* 
 * data: 支持xml和json两种格式
         json格式:[{id:1, name:node1, children:[ {id:3, name:node3, children:[......]} ], xx:xx}, {id:2......}]
 * _default: 树加载完整后默认打开的节点,支持按节点名称(name)或ID(@ID)
 */
1、tssJS.T("tree1", data, _default) 或  tssJS("#tree1").tree(data, _default) : 
2、tssJS.T("tree1") : 获取Tree对象

Tree支持的事件有:
1、onLoad  
2、onChange
3、onTreeNodeActived
4、onTreeNodeDoubleClick
5、onTreeNodeRightClick
6、onTreeNodeMoved
7、onTreeNodeChecked
例子:
var tree3 = $("#tree3").tree(treeData, "node3");  
tree3.onTreeNodeDoubleClick = function(event) {
  alert("打开树节点:" + tree3.getActiveTreeNode().name);
} 

Tree原型方法:
0、getAllNodes() 、 getAllNodeIds()
1、getTreeNodeById(id) : 获取树节点
2、getActiveTreeNode() : 获取当前高亮(激活)的节点(被激活的节点一次只有一个)。如没有,则返回null。
3、getActiveTreeNodeId()
4、getActiveTreeNodeName()
5、getActiveTreeNodeAttr(key)
6、setActiveTreeNode(nodeid or node) : 如果找不到指定的treeNode,或id为空,则清空原active节点
7、addTreeNode(newNode, parent) : 让新增节点出现在可视区域内
8、removeTreeNode(treeNode) :
9、removeActiveNode : 删除当前选中的节点
10、moveTreeNode(from, to) : 移动节点位置
11、sortTreeNode(dragNode, destNode) : 同层移动节点
12、searchNode(keyword) : 
13、scrollTo(treeNode) : 将节点滚动到可视范围之内
14、getCheckedIds(includeHalfChecked) : 多选树,获取选中树节点的ID列表(数组),includeHalfChecked:是否包含半勾选的
15、getCheckedNodes(includeHalfChecked)
16、setCheckValues(checkedIds, clearOld) : checkedIds包含的节点全部自动打钩选中,clearOld:是否清除之前已经勾选的节点

TreeNode原型方法:
0、.id, .name, .children, .level, .opened
1、disable
2、isEnable
3、active
4、inactive
5、openNode
6、getAttribute(name) & setAttribute(name, value)

Message & Tool

1、tssJS.notice(el, msg, delay) 或 tssJS(el).notice(msg, delay) : 附在el上显示提醒 
2、tssJS.tssTip(content, title) : 右下角消息滑动提醒
3、tssJS.tip(content, title)    : 右下角消息提醒
4、tssJS.alert(content, title, callback)    : 
5、tssJS.confirm(content, title, callback, cancelCallback)    : 
6、tssJS.prompt(content, title, callback, deinput) : deinput:输入框的默认值
7、tssJS.relogin(callback, msg)

Panel、leftBar:
1、tssJS.openIframePanel(panelId, title, width, height, src, hideMaxMin) 
2、tssJS("#" + panelId).panel(title, contentHtml, resizable, moveable)
3、tssJS.leftbar(fn1, fn2)
4、tssJS.drag(handleEl) 
   tssJS.resize(type) : type(col | row | )
  钩子: 
  $(".moveable").each(function(i, el){
        $(el).drag();
    });
    $(".resizable").each(function(i, el){
        $(el).resize().resize("col").resize("row");
    })

Date(日期)

日期选择器:
tssJS.createCalendar(el, careTime)
tssJS(el).calendar(inits)

日期函数(tools/tssJS/util_date.js):
cday   当前天 yyyy-MM-dd
cmonth 当前月 yyyy-MM
cweek  当前周

toDate(dataStr)                   字符串日期转换为日期对象
subDate(day, x)                   日期 - x 天,返回 Date 对象
subDateS(day, x)                  日期 - x 天,返回 yyyy-MM-dd格式字符串
getFirstDayOfMonth(day)           获取日期所在月的第一天
getLastDayOfMonth(day)            获取日期所在月的最后一天
isLeapYear(year)                  判断年份是否为润年
getMonthDays(year, month)         获取某一年份的某一月份的天数
getWeekNumber(day)                获取某年的某天是第几周
getEndDateOfWeek(paraYear, weekIndex)  获取某年某周的开始日期
getWeekIndex(day)                 计算指定日期为该年的第几周
getQuarterStartDate(year, season) 获得某季度的开始日期 
getQuarterEndDate(year, season)   获得某季度的结束日期 
getFirstWeekBeginDay(year)        获取某年的第一天

forbidTimeScope(delda, p1, p2)    禁止两个日期查询条件相差大于delta天, p1,p2为时间条件输入框ID

Data(数据)

数据处理函数(tools/tssJS/tssJS.Data.js):
tssJS.Data.isArray(v)
tssJS.Data.sortArray: function(arr, field)  按字段排序数组(desc)
tssJS.Data.sortArray2(arr, field, noField)  按字段排序数组(asc), 值如果一样支持名次重复
/* 
  var a = [
      {'org': '浙江', 'city': '杭州', 'site': '九堡', 'v1': 1, 'v2': '2.2', 'v3': 3}, 
      {'org': '浙江', 'city': '杭州', 'site': '下沙', 'v1': null, 'v2': 2, 'v3': '3.3'}
  ];
  tssJS.Data.groupby(a, 'org,city', 'v1,v2,v3', 1);
*/
tssJS.Data.groupby(arr, fields, vFileds, x)

/*
 * 格式化金额数字
 * number:要格式化的数字
 * decimals:保留几位小数
 * /
tssJS.Data.number_format(number, decimals) 
tssJS.Data.calculatePercent(val1, val2)    计算百分比,保留一位小数

tssJS.Data.combine(obj1, obj2)  合并两个对象属性
tssJS.Data.cover(s, from, to) : 屏蔽敏感信息,从第from个字符到第to个字符,替换为※

tssJS.Data.getByCodes(url, _codes, callback) : 依据Code列表获取(运单、SKU、车辆)等基本信息,支持超过1000
tssJS.Data.getAttachs(tableId, itemId, callback) : 获取采集数据的附件列表信息

/*
 * 导出CSV文件:由数据服务先行生成CSV文件放在服务器的固定目录上,返回文件名称,再以http连接上去下载。
 * 参数1  dataUrl 数据服务地址
 * 参数2  queryParams 数据服务参数
 */
tssJS.Data.exportCSV(dataUrl, queryParams)
tssJS.Data.export(reportId, queryParams)   导出报表,单次10万行
tssJS.Data.data2CSV(name, header, data)    导出页面数据(EasyUI datagrid等)

Charts(图表)

基于Echarts封装(more/bi_template/tssJS.Chart.js)
/* 
 * 折线图,支持一次花多条。
 * 例: tssJS.Chart.line2D('canvas1', 'XXX走势图', [{'name': '周一', 'value': '30'}, .....], 'KG', func);
 *     tssJS.Chart.line2D('canvas1', null, ['X走势图': data1, 'Y走势图': data2], 'KG', func);
 *
 * 注:data中数据个数和labels个数不一定相等,以labels为准,labels有data里没有的默认等于0。
 */
tssJS.Chart.line2D : function (canvasID, _title, data, unitName, func)

/* 饼图, pie2D('canvas1', '货量占比', [{'name': '仓库一', 'value': '300'}, .....]) */
tssJS.Chart.pie2D: function(canvasID, title, data)

/* 柱状图,column2D('canvas1', '货量分布', [{'name': '仓库一', 'value': '300'}, .....]) */
tssJS.Chart.column2D: function(canvasID, title, data, func, config)

/* 
 * 时间 + 空间2维,tssJS.TimeSpace2(data, el, c).show();
 * data格式:
 *   [ { "value": 21425.8, "day": "2015-04-09", "space1": "浙江省", "space2": "杭州市" }, ...... ]
 */
tssJS.TimeSpace2 = function(data, el, config)

/*  时间 + 空间1维,  tssJS.TimeSpace1(data, el, c).show(); */
tssJS.TimeSpace1 = function(data, el, config)

矢量图标库

TSS自带了一个矢量图标库:icons-reference.html,例:icon-pencil


数据录入表

全局变量 & 自定义变量

// 录入表定义信息 
recordId      录入表ID
recordName    录入表名称、Table,通过QueryString传入,rctable|rcname = "xxx"
recordDefine  录入表字段定义
openItemId    默认记录指定数据行表单,通过QueryString指定(通常用于待办提醒链接)
wfCount       审批流待办记录数,>0自动切换为审批模式,默认为提交模式

// 用户权限信息、流程信息等
userCode         用户登录账号
userName         用户姓名
userDomain       用户所属域
userGroups       用户所组织 List<[groupId, groupName]> 
userRoles        用户角色ID列表 List
userRoleNames    用户角色名称列表 List
userAssistGroups 用户所属辅助组 List

// 自定义变量(在Grid加载之后执行)
billMode      流水账模式:只能新增,不能修改、删除;适合流水类数据记录, 默认=false 
default_sort  Grid默认排序字段,可以直接定义default_sort,也可以在录入表字段里加定义 sort:"asc|desc"
EXP_PAGE_SIZE 最大单次导出数据行数,默认50000
注:需要在Grid加载之前执行,需要加注释: /* --- before load --- */

// 定制个性化数据导入
uniqueCodes  覆盖式导入,需定义判断规则(一个或多个字段) uniqueCodes="oto,sjphone"
ignoreExist  是否覆盖式导入,忽略or覆盖已存在的记录,默认为false。为true时,忽略改行数据,不做任何更新
together     是否允许分批导入 false|true,默认为true,只要有一行校验失败,整个CSV文件都不允许导入,如果为false,则允许导入校验正确的行数据
headerTL     自定义表头映射模,适用于第三方系统导出的数据导入至TSS数据表
afterUploadClass 自定义导入上传类,默认为:"com.boubei.tss.dm.record.file.ImportCSV"

录入表单工具函数

checkRole(roles)   检查用户所含有的角色列表是否包含参数里的roles之一
checkGroup(groups)
/* 
 * 依据用户的角色和组织判断用户是否能对指定字段可编辑,除指定的角色和组织之外一律不可编辑,示例:forbid( "score", "r1,r2", "g1, g2");
 */
forbid(field, roles, groups)
permit(field, tag)           设置字段是否可编辑,tag: "true"/"false"。permit("f1,f2", "true")

notice(field, msg) 
updateField(field, value)    更新字段输入框里的值 @param string field 字段编码 @param string value  新值
hideFiled(fields)            将指定字段(一个或多个)从录入表单里隐藏起来不显示,hideFiled("f1,f2")
showFiled(fields)            将指定字段(隐藏状态)从录入表单里重新显示出来,showFiled("f1,f2")

isNew() : 判断是否新增录入,包括复制
check(field, users)  /* check("f1,f2", "User1,User2") 特定用户才能编辑某些字段 */
disableForm()   禁止编辑表单

hideDelButton()  隐藏右键的删除按钮
addOptBtn  增加批量操作按钮 addOptBtn('批量审批', function() { batchUpdate("status", "通过") });  
batchOpt(name, field, value, roles, groups)  例 batchOpt('批量审批', "status", "通过", "r1,r2", "g1, g2");

checkBatch(field, expectVal, msg) 针对指定的字段,检查Grid中选中行该字段的值是否和预期的值一致,不一致弹框提醒
batchUpdate(field, value)  批量更新选中行某一列的值,同时更新数据库里值

自定义方法


/* 自定义根据字段值来禁用 Form及【保存】按钮 */
disableSave = function() {
    if(  $("#kfsh").value() == '确认' ) { 
      disableForm(); 
      return true; 
    } else {  
      $("#page1BtSave").show(); 
      return false; 
    };
}

自定义监听器

preListener   = function() { ... return true/false; }  在表单保存前触发,如不通过,则终止保存
afterListener = function() { ... }  在表单保存后触发,可用作流程控制,发email等

$("#grid").attr("onLoad", "f()" );  grid加载完成后触发 f(),可对grid展示进行处理
attachListerner   在附件列表Grid生成后触发,常用于修改附件url