为每个单个字段实现x-editable + select get data onload / update

时间:2014-02-21 16:27:49

标签: jquery jquery-select2 x-editable

很长一段时间我都试图制作一个可编辑x的数据表。我想编辑所有字段,示例仅针对编辑字段显示:

x1
x2
x3

而不是另一个。

这是jsfiddle示例http://jsfiddle.net/xBB5x/3485/

我也想知道如何设置选择以获取数据,然后如何更新它们(首先可能是onload函数?如果我正确的话,第二个是ajax update.php。)除此之外,我得到了错误data.php文件,而我不想更新bywho字段。非常感谢调查这个烦人的案子。期待提示。

data.php

//delay (for debug only)
sleep(1); 
require_once("../checklogin.php");
require_once("../lib/functions.php");
require_once("../lib/Db.class.php");

// Creates the instance  || preg_match('/^(?=.*\d)(?=.*[A-Za-z])[0-9A-Za-z!@#$%]{8,12}$/', $_POST['password'])
$db = new Db();
$user = new users();
$error = array();

/*
You will get 'pk', 'name' and 'value' in $_POST array.
*/
$pk = $_REQUIRE['pk'];
$name = $_REQUIRE['name'];
$value = $_REQUIRE['value'];
/*
 Check submitted value
*/
if(!empty($value)) {
    /*
      If value is correct you process it (for example, save to db).
      In case of success your script should not return anything, standard HTTP response '200 OK' is enough.

      for example:
      $result = mysql_query('update users set '.mysql_escape_string($name).'="'.mysql_escape_string($value).'" where user_id = "'.mysql_escape_string($pk).'"');
    */
    $update = $db->query("UPDATE tbl_ticket SET ".$name." = :fvalue WHERE id = :id", array(
        "fvalue" => $value,
        "id" => $pk
    ));
    //here, for debug reason we just return dump of $_POST, you will see result in browser console
    echo "ok";
} else {
    /* 
    In case of incorrect value or error you should return HTTP status != 200. 
    Response body will be shown as error message in editable form.
    */

    header('HTTP 400 Bad Request', true, 400);

}

调试data.php:on change input bywho

<br />
<b>Notice</b>: Undefined variable: _REQUIRE in <b>C:\xampp\htdocs\platform\admin\data.php</b> on line <b>20</b><br />
<br />
<b>Notice</b>: Undefined variable: _REQUIRE in <b>C:\xampp\htdocs\platform\admin\data.php</b> on line <b>21</b><br />
<br />
<b>Notice</b>: Undefined variable: _REQUIRE in <b>C:\xampp\htdocs\platform\admin\data.php</b> on line <b>22</b><br />

我绘制数据的功能

function drawticket()
    {
        global $db;
        $drawUserstb = $db->query("SELECT * FROM tbl_ticket");

        foreach ($drawUserstb as &$rows) {
            echo '<tr>  
                    <td>'.$rows['id'].'</td>  
                    <td class="edit bywho '.$rows['id'].'"><a href="#" id="bywho" data-type="text" data-title="Bywho Id" data-pk= "'.$rows['id'].'" data-value="'.$rows['bywho'].'">'.$rows['bywho'].'</a></td>  
                    <td class="edit message '.$rows['id'].'">'.$rows['message'].'</td>  
                    <td class="edit prority '.$rows['id'].'">
                    <a href="#" id="prority" data-title="Prority" data-type="select" data-pk= "'.$rows['id'].'" data-value="'.$rows['prority'].'" data-param="XXX">'.$rows['prority'].'</a>
                    </td>  
            </tr>';
        }
    }

运行编辑操作的脚本

$(document).ready(function () {

    $('td.edit a').editable({
        type: 'text',
        url: 'data.php',      
        ajaxOptions: {
            type: 'put'
        }        
    });
    $('.td.e

dit a[id=prority]').editable({
     loadurl : 'include/json.php',
     submit : 'OK'
});

//ajax emulation
$.mockjax({
    url: '/post',
    responseTime: 200,
    response: function(settings) {
        console.log(settings);
    }
}); 

});

Json用于选择编辑(临时设置)

<?PHP
header('Content-Type: application/json');
    require_once("../../../checklogin.php");
    require_once("../../../lib/functions.php");
    require_once("../../../lib/Db.class.php");

    $db = new Db();
    $user = new users();
    $error = array();
 $array['1'] =  'No prority'; 
 $array['2'] =  'Important'; 
 $array['0'] =  'V important'; 
 $array['selected'] =  '1';
 print json_encode($array);

 ?>

1 个答案:

答案 0 :(得分:0)

我不确定我是否完全关注你的问题。

我相信你要说的第一部分是否希望表中的所有字段都可以编辑?

假设情况如此,你的选择器看起来有些问题。选择器“td.edit a”正在选择具有类编辑的元素下的所有元素。这个实际上是选择“bywho”列和“proraty”列。它没有选择消息列中的元素,因为那里没有锚标记(即)。

选择器'.td.edit a [id = prority]'实际上没有选择任何东西,因为。在td之前。的。意味着阶级。因此它试图找到具有类“td”和类“编辑”的元素,其中文档中没有。如果删除了。它将在“proraty”列中选择锚标记,但它已经由上面的选择器选择。

如果您希望表格中的所有元素都可以编辑,您可能需要执行以下操作: $('td.edit').children().editable({ type: 'text', url: 'data.php',
ajaxOptions: { type: 'put' }
});

请注意,这要求每个元素中都有一个元素,而不仅仅是文本。所以你需要在标签中包装超级用户。 http://jsfiddle.net/xBB5x/4230/

另外,关于你在php中看到的错误。我认为错误意味着您正在使用_REQUIRE的变量未定义。我相信你应该使用$ _POST代替。 (即$ pk = $ _POST ['pk'];)

无论如何,你似乎走在了正确的轨道上。