实训收获之前端框架bootstrap/jquery总结（一）
学校在大三的时候开了实训课程，八人组队去完成一个为期六周的进销存管理系统。在这六周里，我从一个只会写粗糙静态页面的前端菜鸟，变成了有那么一丢丢经验的前端菜鸟。我仍然很菜，但是我打算把这段时期学习到的前端知识总结一下，就当是纪念这段实训生活吧！
进销存管理系统主要以表格为主，进行一些新增、统计、删除的操作，其中表格大致分为两类：可编辑的和点击按钮后可编辑的。但是普通的表格类似于
Tabulator是jquery-ui中很冷门的一个插件，除了官方文档，没有任何的可参考文献、博客等，因此探索之路困难重重。
首先是Tabulator的官方网址：http://tabulator.info/
一、Tabulator的初始化
首先引入Tabulator的包，可以下载之后在项目中引用，也可以直接用cdn的地址，但是要注意，记得引用jquery-ui的包：
表格定义非常简单，直接看代码：
接下来就是在
从代码中可以看出，，tabulator主要是定义列的属性，并对列的样式进行选择。
二、表格参数简介
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", {});
});到现在为止，一个完整的可删可增可编辑的表格就初步完成了。
三、额外需求
一个实际的项目往往是需要实际去约束用户的输入，否则就不配称为一个实际的系统。
那么如何对输入进行输入的验证呢？
最简单的方法是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，没错，这里没有以往调用函数的 （）了。不过我要说明的是，在表格的初始化里调用输入验证时，相对于外部校验较为死板，只能通过锁定单元格的方式来提醒用户，实在是不够友好。建议在表格提交的时候做外部验证。
今天的表格初始化就到这里啦。通过对这种冷门插件的学习，我深切感受到了官方文档的重要性，很多一开始没头没脑的问题，在官方文档里都可以找到答案。