DataTable Editor使用
2016-07-20 19:05
369 查看
DataTable Editor
简介：
官方网址：https://editor.datatables.net/功能介绍：可以支持table中的数据来源于ajax，支持数据分页，支持对表格中的数据进行修改，并保存在数据库中，支持bootstrap，功能很强大。
效果图：
效果图简介：
1) 左上角的new按钮，点击，弹出一个窗口，可以创建一条新的记录
2) 右上角的search按钮，可以对表格中的所有列进行搜索，结果实时反正在当前的table中
3) Table中每个列名字右边有向上和向下的两个箭头，点击就可以排序
4) 右下角的就是自带提供的分页功能
安装步骤
1 把插件引入Thinkphp中
把整个代码放在thinkphp框架下的Vendor目录下
2 创建控制器
<?php// 本类由系统自动生成，仅供测试用途
namespace Home\Controller;
use Think\Controller;
use Think\Model;
// include("../Edit/DataTables.php" );
vendor('Edit.DataTables');
use
DataTables\Editor,
DataTables\Editor\Field,
DataTables\Editor\Format,
DataTables\Editor\Mjoin,
DataTables\Editor\Upload,
DataTables\Editor\Validate,
DataTables\Database;
class BootstrapController
extends BaseController
{
public $editordb;
public function __construct()
{
parent::__construct();
$sql_details = array(
"type" =>
"Mysql",// Database type: "Mysql","Postgres", "Sqlite" or "Sqlserver"
"user" =>
"root", // Database user name
"pass" =>
"", // Database password
"host" =>
"localhost",// Database host
"port" =>
"", // Database connection port (can be left empty fordefault)
"db" =>
"WTJL", // Database name
"dsn" =>
"charset=utf8"
)// PHP DSN extra information. Set as`charset=utf8` if you are using MySQL
// 'pdo' => new Model()
;
$this->editordb =
new Database($sql_details);
}
public function index()
{
$this->display();
}
public function datatable()
{
$this->display();
}
public function GetTableData()
{
$test = D('userinfo');
$rst = $test->select();
$arr = array(
"data" => $rst
);
$this->ajaxReturn($arr, "JSON");
}
public function editTableData()
{
$this->display();
}
Public function HandleEditTableData()
{
$qing = Editor::inst($this->editordb,
'wt_userinfo', 'UI_ID');
$qing->fields(Field::inst('UI_ID'), Field::inst('UI_DEPARTMENT'), Field::inst('UI_ROOM'), Field::inst('UI_NAME'),
Field::inst('UI_SHORTNAME'), Field::inst('UI_TELE_NO'));
$qing->process($_POST);
$qing->json();
}
}
?>
3 创建视图
<!DOCTYPEhtml>
<html>
<head>
<meta
charset="UTF-8">
<title>Editor Table Data</title>
<link
href="{$smarty.const.__CSS__}/jquery.dataTables.min.css"rel="stylesheet">
<link
href="{$smarty.const.__CSS__}/buttons.dataTables.min.css"rel="stylesheet">
<link
href="{$smarty.const.__CSS__}/select.dataTables.min.css"rel="stylesheet">
<link
href="{$smarty.const.__CSS__}/editor.dataTables.min.css"rel="stylesheet">
<script
type="text/javascript"language="JavaScript"
src="{$smarty.const.__JS__}/jquery-1.12.3.min.js"></script>
<script
type="text/javascript"language="JavaScript"
src="{$smarty.const.__JS__}/jquery.dataTables.min.js"></script>
<script
type="text/javascript"language="JavaScript"
src="{$smarty.const.__JS__}/dataTables.buttons.min.js"></script>
<script
type="text/javascript"language="JavaScript"
src="{$smarty.const.__JS__}/dataTables.select.min.js"></script>
<script
type="text/javascript"language="JavaScript"
src="{$smarty.const.__JS__}/dataTables.keyTable.min.js"></script>
<script
type="text/javascript"language="JavaScript"
src="{$smarty.const.__JS__}/dataTables.editor.min.js"></script>
<script
type="text/javascript">
var editor;
// use a global for the submit and returndata rendering in the examples
$(document).ready(function() {
editor = new $.fn.dataTable.Editor({
ajax: "{$smarty.const.__CONTROLLER__}/HandleEditTableData",
type: 'post',
table: "#example",
idSrc: 'UI_ID',
fields: [ {
label: "First name:",
name: "UI_ID"
}, {
label: "Last name:",
name: "UI_DEPARTMENT"
}, {
label: "Position:",
name: "UI_ROOM"
}, {
label: "Office:",
name: "UI_NAME"
}, {
label: "Extension:",
name: "UI_SHORTNAME"
}, {
label: "Salary:",
name: "UI_TELE_NO",
type:"readonly"
}
],
formOptions: {
inline: {
onBlur: 'submit'
}
}
} );
var table=$('#example').DataTable({
dom: "Bfrtip",
ajax: "{$smarty.const.__CONTROLLER__}/GetTableData",
columns: [
{
data: null,
defaultContent: '',
className: 'select-checkbox',
orderable: false
},
{ "data":
"UI_ID"},
{ "data":
"UI_DEPARTMENT"},
{ "data":
"UI_ROOM"},
{ "data":
"UI_NAME"},
{ "data":
"UI_SHORTNAME"},
{ "data":
"UI_TELE_NO"}
],
select: {
style: 'os',
selector: 'td:first-child'
},
buttons: [
{ extend: "create", editor: editor },
{ extend: "edit", editor: editor },
{ extend: "remove", editor: editor }
]
} );
$('#example').on('dblclick','tbody td:not(:first-child)',
function (e){
editor.inline( this
);
} );
} );
</script>
</head>
<body>
<table
id="example"class="display"
cellspacing="0"
style="text-align:center;">
<thead>
<tr>
<th></th>
<th>UI_ID</th>
<th>UI_DEPARTMENT</th>
<th>UI_ROOM</th>
<th>UI_NAME</th>
<th>UI_SHORTNAME</th>
<th>UI_TELE_NO</th>
</tr>
</thead>
</table>
</body>
</html>
4 总结
1) GetTableData函数是通过ajax方式，将数据从数据库发送到前端2) HandleEditTableData函数将前端修改的数据写入数据库
3) 在中"dsn"=>
"charset=utf8"，这里是来设置数据库编码的，防止中文乱码
4) new $.fn.dataTable.Editor的js中有一个idSrc:'UI_ID'，表示我的row的唯一标示是UI_ID
5) 在HandleEditTableData函数中，$qing = Editor::inst($this->editordb,
'wt_userinfo', 'UI_ID'); 'wt_userinfo'是我数据库表的名字，'UI_ID'是我表的主键，如果主键不指定的话，默认为'id'
6) 如果对前端table中某个数据不让它可修改，那么在设置列fields的时候应该加上type:
"readonly"，就像UI_TELE_NO列的设置一样。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- C#实现Datatable排序的方法
- PDF编辑工具 Foxit PDF Editor 1.5 Build 2911 下载
- MicroAdobe PDF Editor 6.2 英文正式版附破解补丁 下载
- C#从DataTable获取数据的方法
- C#实现DataTable映射成Model的方法(附源码)
- C# DataTable使用方法详解
- C#实现从多列的DataTable里取需要的几列
- c# 如何将RadioButton与DataTable数据进行绑定
- C#实现DataTable转换成IList的方法
- C#使用DataSet Datatable更新数据库的三种实现方法
- C# DataTable的详细用法分享
- C#保存与读取DataTable信息到XML格式的方法
- C#中DataTable排序、检索、合并等操作实例
- C#中datatable序列化与反序列化实例分析
- 在ASP.NET 2.0中操作数据之六十八：为DataTable添加额外的列
- C#在DataTable中根据条件删除某一行的实现方法
- C#中DataTable删除行的方法分析
- C# datatable 不能通过已删除的行访问该行的信息处理方法
- C#编程实现DataTable添加行的方法
- DataSet与DataTable的区别示例介绍