0

我有一个像这样工作的表:http ://www.datatables.net/examples/api/editable.html没有标题排序、页面更改和搜索。我有另一个功能可以让我添加一行。所有这些都在同一页面上完成。数据直接从数据库中提取。我编写了通用代码,因此它可以用于我想要显示的任何表格。

但是,我遇到了一个问题。假设最终用户想要查看房屋列表。该列表将从房屋数据库中提取。每个房子都有一个主人。还有一张业主桌。每个所有者都有一个 id (primary_key)。在房屋表中,所有者字段使用所有者的 ID 来标识正确的所有者。这就是问题出现的地方。例如,一旦显示了房屋表中的数据,所有者就会显示为 ID 号。显然,对于最终用户来说,它要么毫无意义,要么至少令人讨厌。在这种情况下,我希望显示有问题的字段,而不是“看似”无意义的字段。我正在为我的困境发布相关代码。

另外,我可以通过 jQuery 更改 mySQL 布尔值吗?我的意思是,例如,如果房子没有出租,那么for_rent标志设置为0for FALSE。表格将显示0,因为那是表格中的内容。我可以通过 jQuery 改变它吗?(找到0s 或1s 并让他们说trueor false?关于回答这些问题的方向的任何建议都会很棒。谢谢。

以下是相关代码:

PHP显示表格:

public function displayTable($table)
{
    //connect to DB
    $con = mysqli_connect(DB_HOST, DB_USER, DB_PASS, DB_NAME);

    echo "<table id='table' border='1'>";   //start an HTML table

    $dbtable = $table;
    $fields =array();
    $result = mysqli_query($con, "SHOW COLUMNS FROM ".$dbtable);

    //fill fields array with fields from table in database
    while ($x = mysqli_fetch_assoc($result))
    {
        $fields[] = $x['Field'];
    }

    $fieldsnum = count($fields);    //number of fields in array

    //create table header from dbtable fields
    foreach ($fields as $f)
    {
        echo "<th>".$f."</th>";
    }

    //create table rows from dbtable rows
    $result = mysqli_query($con, "SELECT * FROM ".$dbtable);

    while ($row = mysqli_fetch_array($result))
    {
        $rowid = $row[$fields[0]];

        echo "<tr class='edit_tr' id='".$rowid."'>";
        foreach ($fields as $f) 
        { 
            echo "<td class='edit_td' data-field='".$f."'><span id='".$rowid."' class='text'>".$row[$f]."</span>
            <input type='text' value='".$row[$f]."' class='editbox' id='".$rowid."' data-field='".$f."'/> </td>"; 
        }
        $rowid++;

        echo "</tr>";
    }

    echo "</table>";    //close the HTML table

    $recordid = $rowid;

    //close connection
    mysqli_close($con);
}

jQuery 实时编辑表:

$(document).ready(function()
    {
        $(".edit_td").click(function()
        {
            $(this).children(".text").hide();
            $(this).children(".editbox").show();                

        }).children('.editbox').change(function()
            {
                var table = $('body').attr('id');
                var id=$(this).closest('tr').attr('id');
                var field=$(this).data('field');
                var text=$(this).val();
                var dataString = {table:table, id:id, field:field, text:text};
                if (field != text)
                {
                    $.ajax({
                    type: "POST",
                    url: "classes/table_edit_ajax.php",
                    data: dataString,
                    cache: false,
                    success: function(html)
                    {
                        window.location.reload(true);
                    }
                    });
                }
                else
                {
                    alert('Enter something.');
                }
            });

        // Edit input box click action
        $(".editbox").mouseup(function() 
        {
            return false
        });

        // Outside click action
        $(document).mouseup(function()
        {
            $(".editbox").hide();
            $(".text").show();
        });

    });

jQuery 实时添加行:

$(document).ready(function()
    {
        $(".add").click(function()
        {
            var fieldArray = [];

            var $table = $("#table");
            var $lastRow = $table.find("tr:last");
            var $dataFields = $lastRow.find("td");

            $dataFields.each(function() {
                fieldArray.push($(this).attr("data-field"));
                });

            $("#table").each(function()
            {

                var $table = $(this);
                var id=$('#table tr:last').attr('id');
                var $tr = $("#table").children('tr');
                var tablename = $('body').attr('id');
                var n = $('tr:last td', this).length;
                var tds = '<tr class="edit_tr" id="' + id++ + '">';

                for(var i = 0; i < n; i++)
                {
                    tds += '<td class="edit_td" data-field="' + fieldArray[i] +
                    '"><span id="'+ id +'" class="text">&nbsp;</span><input type="text" class="editbox" id="' +
                    id + '" data-field="' + fieldArray[i] + '"/>&nbsp;</td>';
                    console.log('id: ' + id);
                }

                tds += '</tr>';

                var dataString = {table:tablename, id:id};

                if($('tbody', this).length > 0)
                {
                    $('tbody', this).append(tds);

                    $.ajax({
                        type: "POST",
                        url: "classes/table_new_ajax.php",
                        data: dataString,
                        cache: false,
                        success: function(html)
                        {
                            window.location.reload(true);
                        }
                    });
                }else {
                    $(this).append(tds);
                }

            }); 
        });
    });
4

1 回答 1

1

您可能希望扩展用于生成 html 表的通用函数,以便在必要时包含一个连接的 db 表,尽管这会变得混乱,因此,当您需要连接 2 个 db 表时创建一个新函数。用于将业主姓名检索到房屋列表中的 sql 类似于(猜测您的字段名称是什么): select a.housename,a.street,a.for_rent,b.name from house a, owner b其中 a.owner_id=b.id

于 2013-10-06T04:13:46.773 回答