此例子演示了使用 jeditable插件 实现datatables行内编辑
点击第一列和第二列看看效果吧
增删改查demo(php) 前往
$(document).ready(function () {
$("#example").dataTable({
//"iDisplayLength":10,
"sAjaxSource": "http://dt.thtxopen.com/datatables/dataListCUrl.php",
//'bPaginate': true,
"bDestory": true,
"bRetrieve": true,
//"bFilter":true,
"bSort": false,
//"bProcessing": true,
"aoColumns": [
{
"mDataProp": "name",
"fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
$(nTd).addClass('inputTd').attr('id', 'td_' + sData + '_' + oData.id);
}
},
{
"mDataProp": "job",
"fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
$(nTd).addClass('selectTd').attr('id', 'td_' + sData + '_' + oData.id);
//$(nTd).html("<select class='selectTd' id=td_"+sData+"_"+oData.id+"><option value="+sData+" selected>"+sData+"</option></select>");
}
},
{"mDataProp": "note"},
{"mDataProp": "date"}
],
"sDom": "<'row-fluid'<'span6 myBtnBox'><'span6'f>r>t<'row-fluid'<'span6'i><'span6 'p>>",
"sPaginationType": "bootstrap",
"language": {
"url": "http://cdn.datatables.net/plug-ins/e9421181788/i18n/Chinese.json"
},
"fnDrawCallback": function (data, x) {
$('#example tbody td.inputTd').editable('editable.php');
$('#example tbody td.selectTd').editable('editableSelect.php',
{
loadurl: 'json.php',
//data:{"10":"10","20":"20","30":"30"},
type: 'select'
//submit : '确定',
//submitdata: { _method: "post"}
});
}
});
});
<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered table-hover"
id="example">
<thead>
<tr>
<th>昵称</th>
<th>技能</th>
<th>添加时间</th>
<th>备注</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<?php
/**
* 数据拼装
*/
$output = array(
"aaData" => array()
);
try {
//连接数据库
$db = new SQLite3('curd.sqlite3');
} catch (Exception $e) {
fatal(
"数据库连接出错" . $e->getMessage()
);
}
$sql = "select * from user";
$result = $db->query($sql);
while ($row = $result->fetchArray(SQLITE3_ASSOC)) {
$row = array(
"id" => $row['id'],
"name" => $row['name'],
"job" => $row['job'],
"date" => $row['start_date'],
"note" => $row['note']
);
$output['aaData'][] = $row;
}
$db->close();
echo json_encode( $output );
function fatal($msg)
{
echo json_encode(array(
"error" => $msg
));
exit(0);
}
?>
<?php
/**
* jeditable 服务器处理方法
* 编辑昵称
*/
$id = $_POST['id'];
$value = $_POST['value'];
list($td, $oldValue, $dbid) = explode('_', $id);
try {
//连接数据库
$db = new SQLite3('curd.sqlite3');
} catch (Exception $e) {
echo "数据库连接出错" . $e->getMessage;
}
$update = "update user set name = '" . $value . "' where id = " . $dbid;
$resultQ = $db->query($update);
if ($resultQ) {
echo $value;
} else {
echo $oldValue;
}
$db->close();
?>
<?php
/**
* 编辑下拉框
*/
$id = $_POST['id'];
$value = $_POST['value'];
list($td, $oldValue, $dbid) = explode('_', $id);
try {
//连接数据库
$db = new SQLite3('curd.sqlite3');
} catch (Exception $e) {
echo "数据库连接出错" . $e->getMessage;
}
$update = "update user set job = '" . $value . "' where id = " . $dbid;
$resultQ = $db->query($update);
if ($resultQ) {
//$array['selected'] = $value;
echo $value;
//print json_encode($array);
} else {
echo $oldValue;
}
$db->close();
?>
<?php
/**
* 模拟动态返回下拉框的选项
*/
$array['java'] = 'java';
$array['C#'] = 'C#';
$array['PHP'] = 'PHP';
$array['selected'] = 'java';
$array['Ruby'] = 'Ruby';
$array['C++'] = 'C++';
echo json_encode($array);
?>