How do I make editable row with dbgrid

Question

I have a datagrid in php for the moment it's work it's show my information. But how do I make them editable when I double click on the information here my code.

Here my header I'm based on a website ( yes it's was free I have the link, nocopyright intented. )

<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>

Here my body of my datagrid .

<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>

here my 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);
?>

Answer 1

try to change this line

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

become like this (modify field)

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

and modify this line

<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">

become like this (modify grid)

<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
        ">

and add this function

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

How do I make editable row with dbgrid

Question

1 answers

solution1
0 2014-12-26 08:31:36

How do I make editable row with dbgrid

Question

1 answers

solution1 0 2014-12-26 08:31:36

solution1
0 2014-12-26 08:31:36