【Footable】简单用法（小白级实例）

Footable说明文档上对Footable的用法做了详细的介绍，但是对于能快速学会运用，就需要参考例子。
本章较Footable说明文档有轻微补充和变动，想更深入使用请参考入门文档
Footable入门文档：https://fooplugins.github.io/FooTable/docs/getting-started.html#breakpoints
第1步：创建您的列表显示界面

<table id="RolemenuTable" style="color:black" class="table table-hover table-p8" data-paging="true" data-filtering="true" data-sorting="true">
</table>

第2步：创建您的编辑器用户界面
（这一步是必不可少的，编辑器用户界面旨在信息添加和修改界面，也就是说这是一个写好的新增和编辑界面）

<div class="modal-dialog" role="document">
<form class="modal-content form-horizontal" id="editor">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="editor-title">Add Row</h4>
</div>
<div class="modal-body">
<input type="number" id="id" name="id" class="hidden"/>
<div class="form-group required">
<label for="firstName" class="col-sm-3 control-label">First Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="firstName" name="firstName" placeholder="First Name" required>
</div>
</div>
<div class="form-group required">
<label for="lastName" class="col-sm-3 control-label">Last Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="lastName" name="lastName" placeholder="Last Name" required>
</div>
</div>
<div class="form-group">
<label for="jobTitle" class="col-sm-3 control-label">Job Title</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="jobTitle" name="jobTitle" placeholder="Job Title">
</div>
</div>
<div class="form-group required">
<label for="startedOn" class="col-sm-3 control-label">Started On</label>
<div class="col-sm-9">
<input type="date" class="form-control" id="startedOn" name="startedOn" placeholder="Started On" required>
</div>
</div>
<div class="form-group">
<label for="dob" class="col-sm-3 control-label">Date of Birth</label>
<div class="col-sm-9">
<input type="date" class="form-control" id="dob" name="dob" placeholder="Date of Birth">
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</form>
</div>
</div>

第3步：完整的JQuery代码

 <script type="text/javascript">
        $(function () {
            var $modal = $('#editor-modal'),
			$editor = $('#editor'),
			$editorTitle = $('#editor-title'),
            //初始化表格
			ft = FooTable.init('#RolemenuTable', {
			    "columns": [{ "name": "ID", "visible": false, "filterable": false },
                      { "name": "Name", "title": "名稱", "breakpoints": "xs sm" },
                       { "name": "Set", "title": "性别", "breakpoints": "xs sm" },
			    ], 
			    "rows": <%=strJson%>,//后台查询的表数据转化为Json格式
			    editing: {
			        enabled: true,
			        addRow: function(){
			            $modal.removeData('row');
			            $editor[0].reset();
			            $editorTitle.text('添加新的资料');
			            $modal.modal('show');
			        },
			        //这里是修改时绑定数据
			        editRow: function(row){
			            var values = row.val();
			            $editor.find('#ID').val(values.ID);
			            $editor.find('#Name').val(values.Name);
			           //如果你有checkbox控件
			           if(values.Set== '1'){
			             $editor.find('#Set').attr("checked","checked");
			           }else{
			            $editor.find('#Set').removeAttr("checked");
			            }
			            $modal.data('row', row);
			            $editorTitle.text('修改资料行 #' + values.Name);
			            $modal.modal('show');
			        },
			        //删除操作
			         deleteRow: function(row){
			            if (confirm('Are you sure you want to delete the row?')){
			                var values = row.val();
			                $editor.find('#ID').val(values.ID);
			                var data = JSON.stringify(values);
			                $.ajax({
			                    type: 'post', 
			                    url: "../Sys/SyRole.aspx?action=delete", 
			                    data:"data=" + data, 
			                    success: function (result) {
			                        if (result > 0)
			                            window.location.reload();//刷新当前页面.
			                    }
			                });
			                row.delete();
			            }
			        }
			    }
			}),
		    uid = $('#RolemenuTable tbody tr').length + 1;
$editor.on('submit', function(e){
if (this.checkValidity && !this.checkValidity()) return; // 如果验证失败，那么早退出，什么都不做。
e.preventDefault(); // 从提交表单中停止默认的post
var row = $modal.data('row'), //获取先前存储的行对象
 //创建编辑行值的散列
var checkSet = function() {
                    if($editor.find('#Set').is(':checked')){
                        return '1';
                    }else{
                        return '0';
                    };
                }
                var row = $modal.data('row');
                values = {
                    ID: $editor.find('#ID').val(),
                    Name: $editor.find('#Name').val(),
                    Set:checkSet (),
                     };
                if (row instanceof FooTable.Row) {
                // 如果我们有一个row对象,那么这是一个编辑操作，您可以对服务器执行ajax调用
                    if (confirm("确定修改数据？")) {
                    $.ajax({
                    //你的操作
                    })
                     }
                    console.log(values);
                } else {
                    values.id = uid++;
                    ft.rows.add(values);
                    var name = $("#RoleCode").val();
                    if (confirm("确定添加数据？")){
                    //这是你的添加操作
                    }
                }
                $modal.modal('hide');
            });
        })
    </script>