此例子演示了使用 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); ?>