行内编辑(php)

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