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

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

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

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

      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，没错，这里没有以往调用函数的 （）了。不过我要说明的是，在表格的初始化里调用输入验证时，相对于外部校验较为死板，只能通过锁定单元格的方式来提醒用户，实在是不够友好。建议在表格提交的时候做外部验证。

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