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>