如何使用dbgrid创建可编辑的行

时间:2014-05-07 13:01:50

标签: php database row jquery-easyui dbgrid

我在php中有一个datagrid,它的工作就是显示我的信息。但是,当我双击我的代码中的信息时,如何使它们可编辑。

这里我的标题我是基于一个网站(是的,它是免费的,我有链接,nocopyright的意图。)

<html>
    <head>  
    <meta http-equiv=Content-Type content="text/html; charset=utf-8" /> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="keywords" content="jquery,ui,easy,easyui,web">
    <meta name="description" content="easyui help you build your web page easily!">
    <title>Add search functionality in DataGrid - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript">
        function doSearch(){
            $('#tt').datagrid('load',{
                prtProjetNum: $('#prtProjetNum').val(),

            });
        }
    </script>

    </head>

这是我的数据网格的主体。

<body>
    <h2>Add search functionality in DataGrid</h2>
    <div class="demo-info" style="margin-bottom:10px">
        <div class="demo-tip icon-tip">&nbsp;</div>
        <div>Enter search values and press search button.</div>
    </div>

    <table id="tt" class="easyui-datagrid" style="width:700px;height:250px"
            url="datamod.php"
            title="TEST" iconCls="icon-search" toolbar="#tb"
            rownumbers="true" pagination="true">
        <thead>
            <tr>
                <th field="prtProjetNum" width="120">prtProjetNum</th>
                <th field="prtLocation" width="120">prtLocation</th>

            </tr>
        </thead>
    </table>
    <div id="tb" style="padding:3px">
        <span>Item ID:</span>
        <input id="prtProjetNum" style="line-height:26px;border:1px solid #ccc">


        <a href="#" class="easyui-linkbutton" plain="true" onclick="doSearch()">Search</a>
    </div>


        <form method="post" action="index.php">
                <input type="submit" name="disconnect"  value="Se déconnecté" id="disconnectsheet"  />
        </form>
    </body>

</html>

这是我的datamod.php

<?php
    include 'connmod.php';

    $page = isset($_POST['page']) ? intval($_POST['page']) : 1;
    $rows = isset($_POST['rows']) ? intval($_POST['rows']) : 10;
    $prtProjetNum = isset($_POST['prtProjetNum']) ? mysql_real_escape_string($_POST['prtProjetNum']) : '';


    $offset = ($page-1)*$rows;

    $result = array();

    $where = "prtProjetNum like '$prtProjetNum%' ";
    $rs = mysql_query("select count(*) from projetstaches where " . $where);
    $row = mysql_fetch_row($rs);
    $result["total"] = $row[0];

    $rs = mysql_query("select * from projetstaches where " . $where . " limit $offset,$rows");

    $items = array();
    while($row = mysql_fetch_object($rs)){
        array_push($items, $row);
    }
    $result["rows"] = $items;

    echo json_encode($result);
?>

1 个答案:

答案 0 :(得分:0)

尝试更改此行

<th field="prtProjetNum" width="120">prtProjetNum</th>
<th field="prtLocation" width="120">prtLocation</th>

变成这样(修改字段)

<th data-options="field:'prtProjetNum',width:120,editor:{type:'validatebox'}">prtProjetNum</th>
<th data-options="field:'prtLocation',width:120,editor:{type:'validatebox'}" >prtLocation</th>

并修改此行

<table id="tt" class="easyui-datagrid" style="width:700px;height:250px"
        url="datamod.php"
        title="TEST" iconCls="icon-search" toolbar="#tb"
        rownumbers="true" pagination="true">

变成这样(修改网格)

<table id="tt" class="easyui-datagrid" style="width:700px;height:250px"
        url="datamod.php"
        title="TEST" iconCls="icon-search" toolbar="#tb"
        rownumbers="true" pagination="true" data-options="onDblClickRow:onDblClickRow
        ">

并添加此功能

function onDblClickRow(index){
  $("#tt").datagrid('selectRow', index)
                        .datagrid('beginEdit', index);
}