高分求！网页中有大表格（200行以上）数据存储时的速度问题！（只能给100分，再开贴送分。）

Question

本帖最后由 fyhrx 于 2011-10-09 11:22:26 编辑

Answer 1

每个单元格直接用一个input 然后使用js 来控制 每一个修改使用ajax 即时传递到数据库进行修改.这样就可以解决你的刷新等问题。这样的表格我做过.

Answer 2

第1、2个input直接写入当前td的属性值，监听当前td的click事件，动态生成input，改变之后ajax提交。就没有input了。。

Answer 3

ajax　　 吧， 如果 你的表格是规范或者 确定行数，列数， 用循环创建表格，   ajax  把坐标也一起传到处理页面。 直接更新数据库， 都不用刷新页面

Answer 4

只需将 input typetext 的 name 按 二维数组方式命名即可

Answer 5

恩，唠叨大哥的方法不错，这样就不可以去掉2个隐藏的input了
至于刷新页面打开慢，确实可以用ajax来解决不过200行显示起来有这么慢吗？

Answer 6

200行的表格不慢，关键是我除了3个input，每个单元格里还隐藏了一个层，单击鼠标可以显示层，把提交数据的功能做在那个隐藏层里了，层里面至少有十个表单元素，所以整个表格打开很慢。刚开始不想用Ajax，想用最原始的方法实现，提交，处理，再返回刷新，每次刷新3-5秒，慢啊。

Answer 7

ajax,肯定的.还有唠叨大哥已经说了，input数组命名

Answer 8

200行不多。用 name="data[]"
你不会弄了200个层吧。改成一个。全部调这一个就好了。

Answer 9

[Quote=引用 8 楼 ci1699 的回复:]
200行不多。用 name="data[]"
你不会弄了200个层吧。改成一个。全部调这一个就好了。要是鼠标单击单元格，弹出一个层，层里可以获得点击的单元格的行、列信息，还有个文本框可以输入数值，然后提交，怎样动态生成这个层，能写个简单的代码实现一下吗？谢谢我原来的做法就是把每个单元格对应的层都写出来，然后隐藏起来，鼠标单击单元格时再显示出来。所以网页载入速度就特别慢。

Answer 10

谁能提供一个简单的代码实现，太感谢了，我baidu了，没找到类似的。

Answer 11

这个纯属前端的问题。如果你的JQ用的熟练的话，可以很轻松的写出来，比如双击单元格可以动态创建一个input，并把这单元格的文本作为input的value，剩下的事儿就不多说了吧。。如果你嫌自己写的太麻烦，就用Extjs,或者找找jquery的相关插件。

Answer 12

<table>
<tr>
<td data-id="1" data-key-id="key1" class="eidt-td">Nihao</td>
</tr>
</table>
$('.edit-td').edittd(function(){
var that = $(this);
var id=that.attr('data-id');
var kid = that.attr('data-key-id')
//处理若逻辑
//$.post()
});

Answer 13

<table>
<tr>
<td data-id="1" data-key-id="key1" class="eidt-td">Nihao</td>
</tr>
</table>
$('.edit-td').edittd(function(){
var that = $(this);
var id=that.attr('data-id');
var kid = that.attr('data-key-id')
//处理若逻辑
//$.post()
});

Answer 14

这里肯定要用到前端js技术，如果用jquery来处理的话，再简单不过了
假设表格如下：
<table><tr><td btn="11">第一列第一行</td></tr></table>如果使用jquery代码，如下：
$(function(){
$('td').bind('click',function(){
var zuobiao = $(this).attr('btn');
if(zuobiao){//如果存在坐标，就处理
$(this).html('<input onblur="changes(this)" name="" value="'+$(this).text+'" />')
}
})
})
思路差不多这样，然后写一个ajax提交，当然还要做处理，比如防止重复点击
function changes(obj){
var name=$(obj).val();
$.post()//然后post表单
}

Answer 15

http://www.trirand.com/blog/jqgrid/jqgrid.html

Answer 16

HTML...
<table id="rowed2"></table>
<div id="prowed2"></div>
<br /><script src="rowedex2.js" type="text/javascript"> </script>Java Scrpt code...
jQuery("#rowed2").jqGrid({
    url:'server.php?q=3',
datatype: "json",
    colNames:['Actions','Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
    colModel:[
{name:'act',index:'act', width:75,sortable:false},
    {name:'id',index:'id', width:55},
    {name:'invdate',index:'invdate', width:90, editable:true},
    {name:'name',index:'name', width:100,editable:true},
    {name:'amount',index:'amount', width:80, align:"right",editable:true},
    {name:'tax',index:'tax', width:80, align:"right",editable:true},
    {name:'total',index:'total', width:80,align:"right",editable:true},
    {name:'note',index:'note', width:150, sortable:false,editable:true}
    ],
    rowNum:10,
    rowList:[10,20,30],
    pager: '#prowed2',
    sortname: 'id',
    viewrecords: true,
    sortorder: "desc",
gridComplete: function(){
var ids = jQuery("#rowed2").jqGrid('getDataIDs');
for(var i=0;i < ids.length;i++){
var cl = ids[i];
be = "<input style='height:22px;width:20px;' type='button' value='E' onclick=\"jQuery('#rowed2').editRow('"+cl+"');\"  />"; 
se = "<input style='height:22px;width:20px;' type='button' value='S' onclick=\"jQuery('#rowed2').saveRow('"+cl+"');\"  />"; 
ce = "<input style='height:22px;width:20px;' type='button' value='C' onclick=\"jQuery('#rowed2').restoreRow('"+cl+"');\" />"; 
jQuery("#rowed2").jqGrid('setRowData',ids[i],{act:be+se+ce});
}
},
editurl: "server.php",
    caption:"Custom edit "
});
jQuery("#rowed2").jqGrid('navGrid',"#prowed2",{edit:false,add:false,del:false});PHP with MySQL...
$page = $_GET['page']; // get the requested page
$limit = $_GET['rows']; // get how many rows we want to have into the grid
$sidx = $_GET['sidx']; // get index row - i.e. user click to sort
$sord = $_GET['sord']; // get the direction
if(!$sidx) $sidx =1;
// connect to the database
$db = mysql_connect($dbhost, $dbuser, $dbpassword)
or die("Connection Error: " . mysql_error());mysql_select_db($database) or die("Error conecting to db.");
$result = mysql_query("SELECT COUNT(*) AS count FROM invheader a, clients b WHERE a.client_id=b.client_id");
$row = mysql_fetch_array($result,MYSQL_ASSOC);
$count = $row['count'];if( $count >0 ) {
$total_pages = ceil($count/$limit);
} else {
$total_pages = 0;
}
if ($page > $total_pages) $page=$total_pages;
$start = $limit*$page - $limit; // do not put $limit*($page - 1)
$SQL = "SELECT a.id, a.invdate, b.name, a.amount,a.tax,a.total,a.note FROM invheader a, clients b WHERE a.client_id=b.client_id ORDER BY $sidx $sord LIMIT $start , $limit";
$result = mysql_query( $SQL ) or die("Couldn t execute query.".mysql_error());$responce->page = $page;
$responce->total = $total_pages;
$responce->records = $count;
$i=0;
while($row = mysql_fetch_array($result,MYSQL_ASSOC)) {
    $responce->rows[$i]['id']=$row[id];
    $responce->rows[$i]['cell']=array("",$row[id],$row[invdate],$row[name],$row[amount],$row[tax],$row[total],$row[note]);
    $i++;
}        
echo json_encode($responce);