CN105824642A

CN105824642A - 一种快速开发手机税务客户端申报表的js组件

Info

Publication number: CN105824642A
Application number: CN201610166914.4A
Authority: CN
Inventors: 肖庆超; 杨培强; 程林
Original assignee: Inspur Software Group Co Ltd
Current assignee: Inspur Software Group Co Ltd
Priority date: 2016-03-23
Filing date: 2016-03-23
Publication date: 2016-08-03

Abstract

本发明提供一种快速开发手机税务客户端申报表的JS组件，开发者通过编写简单的json格式数据，调用js组件中的函数，生成相应报表的html代码，然后将生成代码填充到相应位置，完成开发；此组件节省了大量时间和项目的开发成本，是一种非常方便的js组件；在相应页面引入table.js，table.css;将相应表格内容转化成json格式数据；将编写好的两个json数据传给js组件中的函数。本发明解决了手机税务客户端申报表开发复杂耗时问题，很大的降低手机端开发人的占用量；节约开发时间，从而节约项目的开发成本问题；手机税务申报表没有统一格式，多人开发还需要统一格式，这个js组件提供了一种统一的格式。

Description

一种快速开发手机税务客户端申报表的JS组件

技术领域

本发明涉及软件技术领域,具体地说是一种快速开发手机税务客户端申报表的JS组件。

背景技术

互联网已经进入到了成熟的时代，现在也越来越重视与用户之间的交流，这就必不可少需要通讯工具，因此，智能手机逐渐成为绝大部分人的必备品。而对于纳税人来说，手机申报显得更加方便，便捷，从而手机税务客户端按申报表的开发也越来越重要。

目前手机税务申报表开发耗时长，页面格式调整困难，所以申报表的js组件成为了一种越来越被需求的东西，从而具备了一定的使用价值。

发明内容

本发明的目的是克服现有技术中存在的不足，提供一种快速开发手机税务客户端申报表的JS组件。

本发明的技术方案是按以下方式实现的，其结构由开发者通过编写简单的json格式数据，调用js组件中的函数，生成相应报表的html代码，然后将生成代码填充到相应位置，完成开发；此组件节省了大量时间和项目的开发成本，是一种非常方便的js组件；

其实现步骤如下：

第一步：在相应页面引入table.js，table.css;

第二步：将相应表格内容转化成json格式数据；

编写提供表格头部信息的hearderjson，

如下：varhearderjson={"list":[{"text":"项目","width":1}]}

其中：text表示单元格中需要展示的文本；width表示单元格的宽度，值为：1,2,3,4；

编写提供表的内容textjson，textjson的编写原则是，第一层是表示行的列表tr；tr的每个元素中有两个参数：一个是行高height，一个是本行每列的信息列表td；td中每个元素有3个参数：分别是列宽width，单元格展示信息text，颜色color。其中的如果color值为-1，则表示这个单元格中有一个更小的表，则text则是小表的json数据，格式和大表的一样，如果color值为0，则表示这个单元格是不可以编辑的，text表示单元格的展示内容，如果color值为1，则表示这个单元格可以编辑，是需要填写的项；

第三步：将编写好的两个json数据传给js组件中的函数；

initTablehearder(textjson,hearderjson)，生成表格代码，填充到相应位置，完成开发。

js组件是一种基于html5+css3+js的实现手机税务客户端简单、快速的自动生成申报表代码，实现申报表前端开发的组件，即通过简单的调用js组件来实现税务申报表快速生成，从而达到简化开发，节省开发时间的目的。

通过简单的函数调用，js组件完成对应申报表html代码的编写，然后加入到对应的区域，来实现申报表开发的功能，保证了开发的简单，方便，快速；

本发明的优点是：

（1）、解决了手机税务客户端申报表开发复杂耗时问题，尤其是对于大量的申报表开发，手机端开发人员不足的情况，就可以通过其他人员根据申报表表格编写json数据，直接提供给开发人员使用，很大的降低手机端开发人的占用量；

（2）、节约开发时间，从而节约项目的开发成本问题；

（3）、json数据学习非常简单，对json提供者要求很低，很大程度降低了对开发人员的要求；

（4）、手机税务申报表没有统一格式，多人开发还需要统一格式，这个js组件提供了一种统一的格式。

实施方式

下面对本发明的一种快速开发手机税务客户端申报表的JS组件作以下详细说明。

本发明的一种快速开发手机税务客户端申报表的JS组件，开发者通过编写简单的json格式数据，调用js组件中的函数，生成相应报表的html代码，然后将生成代码填充到相应位置，完成开发；此组件节省了大量时间和项目的开发成本，是一种非常方便的js组件；

其实现步骤如下：

第一步：在相应页面引入table.js，table.css;

第二步：将相应表格内容转化成json格式数据；

编写提供表格头部信息的hearderjson，

如下：varhearderjson={"list":[{"text":"项目","width":1}]}

其中：text表示单元格中需要展示的文本；width表示单元格的宽度，值为：1,2,3,4（1表示手机屏幕1/4的宽度）；

第三步：将编写好的两个json数据传给js组件中的函数；

其特点如下：

（1）、采用html5+css3+js的开发模式，手机客户端开发人员使用起来方便简单；

（2）、组件使用简单，只需要提供相应表格的json数据，就可生成申报表，开发人员使用难度低；

（3）、组件样式清晰、简单，开发人员后期维护更新起来比较简单，利于组件的完善和使用；

（4）、组件可复制性强，熟悉使用一两次，就可快速开发；

js组件主要由table.js和table.css组成，table.js主要是实现申报表html代码的生成；table.css主要是设置申报表的样式。

组件的程序代码如下：

1)js组件table.js代码如下：

functioninitTablehearder(textjson,hearderjson){

vartdW=parseInt(localStorage.windowW)/4;

varhtml='<tablestyle="font-size:'+(1.1*tdW/7)+'px">'+

'<trclass="c-blu6t-wh"height="'+(4*tdW/14)+'px"><tdwidth="'+(tdW/2+(tdW+1)*3)+'px">一、房产税</td></tr>'+

'<tr><table><trheight="'+(4*tdW/14)+'px">'+

'<tdwidth="'+(tdW/2)+'px"align="center"class="c-blu7t-wh">行次</td>';

varhmclist=hearderjson.list

for(vari=0;i<hmclist.length;i++){

vartd=hmclist[i];

html+='<tdclass="c-blu7t-wh"align="center"width="'+(tdW*td.width)+'px">'+td.text+'</td>';

}

html+='</tr></table></tr><tr>'+initTable(textjson,0);

html+='</tr></table>';

returnhtml;

}

functioninitTable(json,csum){

csum+=1;

varhtml='<table>';

for(vari=0;i<json.tr.length;i++){

vartr=json.tr[i];

html+='<trheight="'+(parseInt(localStorage.windowW)/14*tr.height)+'px">';

for(varj=0;j<tr.td.length;j++){

vartd=tr.td[j];

vartdW=parseInt(localStorage.windowW)/4;

if(j==0&&csum==1){

html+='<tdwidth="'+(tdW/2)+'px"align="center"class="c-gra">'+(i+1)+'</td>';

}

if(td.color==-1){

html+='<tdwidth="'+(tdW*td.width)+'px">'+initTable(td.text)+'</td>';

}elseif(td.color==1){

html+='<tdwidth="'+(tdW*td.width)+'px"><inputtype="input"value=""class="ub-pc"style="width:96%;height:100%;font-size:1.1em;"></td>';

}elseif(td.color==0){

html+='<tdwidth="'+(tdW*td.width)+'px"class="c-gra">'+td.text+'</td>';

}

html+='</tr>';

}

html+='</table>';

returnhtml;

}

其中主要有两个函数，其中：

initTablehearder(textjson,hearderjson)是生成表头和表名称的函数；

initTable(json,csum)是生成表格的函数。

initTable函数会根据传过来的json数据，自动解析生成每行每列数据，如果单元格中存在子表，则调用自身进行递归生成单元格的子表代码。

2）样式table.css基本代码如下：

table{

border-collapse:collapse;

padding:0px;

}

tabletd{

border:1pxsolid#000;

padding:0px;

}

.c-blu6{

background-color:#0066FF;

}

.c-blu7{

background-color:#0099FF;

}

.ub

{

display:-webkit-box!important;

display:box!important;

position:relative;

}

.ub-ver

{

-webkit-box-orient:vertical;

box-orient:vertical;

}

本发明的一种快速开发手机税务客户端申报表的JS组件其加工制作非常简单方便，按照说明书所示即可加工。

除说明书所述的技术特征外，均为本专业技术人员的已知技术。

Claims

1.一种快速开发手机税务客户端申报表的JS组件,其特征在于开发者通过编写简单的json格式数据，调用js组件中的函数，生成相应报表的html代码，然后将生成代码填充到相应位置，完成开发；此组件节省了大量时间和项目的开发成本，是一种非常方便的js组件；

其实现步骤如下：

第一步：在相应页面引入table.js，table.css;

第二步：将相应表格内容转化成json格式数据；

编写提供表格头部信息的hearderjson，

如下：varhearderjson={"list":[{"text":"项目","width":1}]}

编写提供表的内容textjson，textjson的编写原则是，第一层是表示行的列表tr；tr的每个元素中有两个参数：一个是行高height，一个是本行每列的信息列表td；td中每个元素有3个参数：分别是列宽width，单元格展示信息text，颜色color；其中的如果color值为-1，则表示这个单元格中有一个更小的表，则text则是小表的json数据，格式和大表的一样，如果color值为0，则表示这个单元格是不可以编辑的，text表示单元格的展示内容，如果color值为1，则表示这个单元格可以编辑，是需要填写的项；

第三步：将编写好的两个json数据传给js组件中的函数；