html实训收获,实训收获以前端框架bootstrap/jquery总结（一）

学校在大三的时候开了实训课程，八人组队去完成一个为期六周的进销存管理系统。在这六周里，我从一个只会写粗糙静态页面的前端菜鸟，变成了有那么一丢丢经验的前端菜鸟。我仍然很菜，可是我打算把这段时期学习到的前端知识总结一下，就当是记念这段实训生活吧！javascript

进销存管理系统主要以表格为主，进行一些新增、统计、删除的操做，其中表格大体分为两类：可编辑的和点击按钮后可编辑的。可是普通的表格相似于

的定义并不能知足咱们的需求。所以在前期的挣扎思考中，咱们选择了bootstrap-table和jQuery-ui的 tabulator的表格插件，分别主要用来实现点击按钮后可实现和可编辑的表格。今天就先主要说一下Tabulator。css

Tabulator是jquery-ui中很冷门的一个插件，除了官方文档，没有任何的可参考文献、博客等，所以探索之路困难重重。html

首先是Tabulator的官方网址：http://tabulator.info/前端

1、Tabulator的初始化java

首先引入Tabulator的包，能够下载以后在项目中引用，也能够直接用cdn的地址，可是要注意，记得引用jquery-ui的包：jquery

表格定义很是简单，直接看代码：数据库

接下来就是在

$(function(){

$("#example-table").tabulator({

//设置列属性

columns:[

{formatter:"rownum", align:"center", width:40},

{title:"型号", field:"model",editor:true,headerSort:false,editor:"select",editorParams:getmodel(),widthGrow:1},

{title:"银", field:"agWeight",align:"center",headerSort:false,editor:true},

{title:"铜", field:"cuWeight",editor:true,headerSort:false,widthGrow:1},

{title:"锌", field:"znWeight", align:"center",headerSort:false,editor:true,widthGrow:1},

{title:"镉", field:"cdWeight", align:"center",headerSort:false,editor:true,widthGrow:1},

{title:"锡", field:"snWeight", align:"center",headerSort:false,editor:true,widthGrow:1},

{title:"废料", field:"wasteWeight",align:"center",headerSort:false,editor:true,widthGrow:1},

{title:"胚料产出", field:"batchBlanksWeight", align:"center",headerSort:false,editor:true,widthGrow:1},

{title:"炉数(个)", field:"fireNumber",align:"center",headerSort:false,editor:true,widthGrow:1},

{title:"操做",field:"operation",formatter:"tickCross",align:"center",headerSort:false,editor:false,widthGrow:1,cellClick:function(e, cell){cell.getRow().delete()}}

],

});

});

从代码中能够看出，，tabulator主要是定义列的属性，并对列的样式进行选择。后端

2、表格参数简介函数

title:title字段就是显示出来的表头；

field就是这个表头在后端的名字啦，要和后台的命名保持一致，否则先后端会出错！

editor是用来确认这一列是否能够编辑，true为可编辑，false则相反。同时！还能够在用来定义列的其余编辑格式，好比选择框

如图这样，点击单元格就会出现一个下拉选择框，框内可选项分别是仓库、工厂、商务和领导。若是是动态获取的下拉选项，那么久按照上一页的代码，经过调用函数来实现。

align：这个就不用说了，写过HTML的应该都知道，这个是用来限制位置的，可是要注意的是，这个align是针对于单元格内容的位置，而不是表头的位置。

headerSort:这也是Tabulator很厉害的地方了，能够对列进行排序，经过true/false来控制排序开关。

widthGrow：这是用来自动控制列的宽度的。

formatter:"rownum":众所周知，表格通常都有行号，这个即是用来控制行号的。

若是编辑错了就会须要一个按钮来进行删除操做，只要设置formatter:"tickCross"以及在列的初始中写以下代码，就会达到你想要的效果。

说了这么久按理说应该有效果图了，可是这时表格是空的，灰不溜秋的，这个时候咱们先来初始化咱们的表格：

$(function(){

//表格列的初始化结束

var tabledata = [

{},{},{},{}

];

//load sample data into the table

$("#example-table").tabulator("setData", tabledata);

});

由代码能够看出咱们给表格增长了四行空的数据。好了咱们看一下效果图：

其中型号是从后台获取，点击型号列的任一单元格，就会显示

下拉选项是数据库中读取的。

表格中每一个单元格都是能够编辑的，这是这个表格插件的最基本的特色。

那么下一个问题来了：若是我要添加的数据不止四行呢？我是这么实现的：

先作一个增长按钮：

效果是这样的：

点击"加号"，就会多一行在当前页面上，这是经过js来实现的：

//Add row on "Add Row" button click

$("#add-row").click(function(){

$("#example-table").tabulator("addRow", {});

});

到如今为止，一个完整的可删可增可编辑的表格就初步完成了。

3、额外需求

一个实际的项目每每是须要实际去约束用户的输入，不然就不配称为一个实际的系统。

那么如何对输入进行输入的验证呢？

最简单的方法是Tabulator的官方文档提供的：使用validator属性来进行约束

例如，此列为必填列，能够写做为：validator:"required";此列为整数，能够写做为：validator:"Integer"...

除此以外还有最小值、最大值的验证等等，若是不知足输入的验证，单元格将会变红色而且被锁定，没法进行其余操做，知道数据输入为知足须要的。

有兴趣有须要的请参见官方文档http://tabulator.info/docs/3.5#calculations。

今天我要提到的验证是本身写函数来进行验证的，若是某一列要求输入三位之内的小数，咱们能够写一个关于三位小数的函数：

//验证输入为不超过三位小数的数字

function threefloatnumber(value){

//cell - the cell component for the edited cell

//value - the new input value of the cell

//parameters - the parameters passed in with the validator

if(value==""){

return true;

}

if(value==undefined){

return true;

}

if(isNull(value)){

return true;

}

if(!isNumber(value)){

return false;

}

var datastr=value+"";

if(datastr.split('.').length > 1 && datastr.split('.')[1].length>3){

//alert("超过三位小数");

return false;

}

if(value<0){

//alert("不能为负");//注意函数里不要出现alert，不然针对错误的输入一直提示，会形成死循环。

return false;

}

return true;

}

此时的验证能够在表格初始化的列里validator：threefloatnumber，没错，这里没有以往调用函数的 ()了。不过我要说明的是，在表格的初始化里调用输入验证时，相对于外部校验较为死板，只能经过锁定单元格的方式来提醒用户，实在是不够友好。建议在表格提交的时候作外部验证。

今天的表格初始化就到这里啦。经过对这种冷门插件的学习，我深切感觉到了官方文档的重要性，不少一开始没头没脑的问题，在官方文档里均可以找到答案。