此例子演示了使用 jeditable插件 实现datatables行内编辑
点击第一列和第二列看看效果吧
增删改查demo(php) 前往
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | $(document).ready( function () { $( "#example" ).dataTable({ //"iDisplayLength":10, //'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" : { }, "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"} }); } }); }); |
1 2 3 4 5 6 7 8 9 10 11 12 13 | < 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 > |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <?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); } ?> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <?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(); ?> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <?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(); ?> |
1 2 3 4 5 6 7 8 9 10 11 12 | <?php /** * 模拟动态返回下拉框的选项 */ $array [ 'java' ] = 'java' ; $array [ 'C#' ] = 'C#' ; $array [ 'PHP' ] = 'PHP' ; $array [ 'selected' ] = 'java' ; $array [ 'Ruby' ] = 'Ruby' ; $array [ 'C++' ] = 'C++' ; echo json_encode( $array ); ?> |