最近项目中用了Bootstrap的样式风格，控件用了JQuery Datatables，主要有几下几点目标：
- 实现BootStrap风格的table，使用Ajax获取数据，并有勾选项
- 可以实现全选，单击勾选
- 双击行弹出编辑对话框，点击保存使用Ajax传送到服务端保存
- 实现批量删除
- 分页操作（下次再记录）
- 查询操作（下次再记录）
- 排序操作（下次再记录）
第一部分：
编写一个只有thead的table，tbody会在JS函数中自动生成。
HMTL代码如下：
<table id="example" class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th class="center">
<label class="position-relative">
<input type="checkbox" class="ace"/>
<span class="lbl"></span>
</label>
</th>
<th>公司名称</th>
<th>简称</th>
<th>所在城市</th>
<th>地址</th>
<th>联系人</th>
<th>联系电话</th>
</tr>
</thead> </table>
直接在该Table上加入JS代码
$('#example').dataTable({
"oLanguage": { //语言设置
"sProcessing": "正在加载中......",
"sLengthMenu": "每页显示 _MENU_ 条记录",
"sZeroRecords": "对不起，查询不到相关数据！",
"sEmptyTable": "表中无数据存在！",
"sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",
"sInfoFiltered": "数据表*为 _MAX_ 条记录",
"sSearch": "搜索",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上一页",
"sNext": "下一页",
"sLast": "末页"
}
},
bAutoWidth: false, //自动适应宽度
"bFilter": false, //查询
"bSort": true, //排序
"bInfo": false, //页脚信息
"bLengthChange": false, //改变每页显示数据数量
"bServerSide": true, //服务器数据
"sAjaxSource": '/XXX/XXX/GetList',
"bProcessing": true, //当datatable获取数据时候是否显示正在处理提示信息。
"bPaginate": true, //显示分页器
"iDisplayLength ": 10, //一页显示条数
"aoColumns": [
{
//自定义列
"sName":"Id", //Ajax提交时的列明（此处不太明白，为什么用两个属性--sName，mDataProp）
"mDataProp": "Id", //获取数据列名
"sClass": "center", //样式
"bStorable": false, //该列不排序
"render": function(data, type, row) { //列渲染
return '<label class="position-relative">' +
'<input type="checkbox" class="ace" value="'+data+'"/>' +
'<span class="lbl"></span>' +
'</label>';
}
},
{
"sName": "Name",
"mDataProp": "Name",
"bSearchable": true, //检索可用
"bStorable": true
},
{
"sName": "CustomerSN",
"mDataProp": "CustomerSN",
"bSearchable": false,
"bStorable": false
},
{
"mDataProp": "City",
"sName": "City"
},
{
"sName": "Address",
"mDataProp": "Address"
},
{
"sName": "Contact",
"mDataProp": "Contact"
},
{
"sName": "ContactPhone",
"mDataProp": "ContactPhone"
}
]
});
第二部分：
加入全选，点击一行将Checkbox勾选功能，使用纯JS实现
$(document).on('click', 'th input:checkbox', function() {
var that = this;
$(this).closest('table').find('tr > td:first-child input:checkbox')
.each(function() {
this.checked = that.checked;
$(this).closest('tr').toggleClass('selected');
});
});
//对行单击添加监听事件
$('#example tbody').on('click', 'tr', function () {
var tr = $(this).closest('tr');
var checkbox = tr.find('td:first-child input:checkbox')[0];
checkbox.checked = !checkbox.checked;
});
全选，单击勾选
第三部分：
首先建立一个模态框（用BootStrap实现），然后双击在JS中控制来显示该模态框。最后用Ajax保存
<div class="modal fade" id="newPopUp">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="True">×</button>
<h4 class="modal-title" id="newCustomerLabel">新增客户</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form" id="customerForm">
<div class="form-group">
<label for="inputName" class="col-sm-2 control-label">客户名称</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputName" placeholder="客户名称"/>
</div>
</div>
...
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" onclick=" saveItem() ">保存</button>
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>
模态框
//对行双击添加监听事件
$('#example tbody').on('dblclick', 'tr', function () {
var tr = $(this).closest('tr');
var id = tr.find('td:first-child input:checkbox').val();//获取Checkbox的值
editItem(id);
});
//编辑
function editItem(id) {
//更改模态窗口名称
var modal = $('#newPopUp');
modal.find('#newCustomerLabel').text("编辑");
$.ajax({
url: "/XXX/XXX/GetItem",
type: "GET",
data: { "Id": id },
success: function (result) {
//赋值
$('#inputName').val(result.Name);
....
}
});
}
对行双击添加监听事件
//保存
function saveItem() {
var name = $('#inputName').val();
... $.ajax({
url: "/XXX/XXX/Post",
type: "POST",
data: { "Name": name....},
success: function() {
$('#newPopUp').modal('hide');
reloadList();
}
});
}
保存操作
第四部分：
将勾选的项删除，如果没有勾选项目，弹出提示对话框，实现也很简单。
//删除操作
function deleteItem() {
//在此用了BootStrap的一个插件，BootStrap.Message,并中文化
$.messager.model = {
ok: { text: "确认", classed: 'btn-info' },
cancel: { text: "取消", classed: 'btn-danger' }
};
//获取所有勾选ID
var ids="";
$('#example').find('tr > td:first-child input:checkbox')
.each(function () {
if (this.checked) {
ids+=$(this).val()+",";
}
});
//如果没有勾选，提示
if (ids === "") {
$.messager.alert("请选择一行数据！");
return;
} else {
ids = ids.substr(0, ids.length - 1);
} $.messager.confirm("删除", "确认要删除吗？", function () {
$.ajax({
url: "/XXX/XXX/Delete",
type: "Delete",
data: { "ids": ids },
success: function () {
reloadList();//重新加载
}
});
});
}
删除操作
//刷新
function reloadList() {
var tables = $('#example').dataTable().api();//获取DataTables的Api，详见 http://www.datatables.net/reference/api/
tables.ajax.reload();
}
刷新