Question

我正在使用MVC3，C＃，Razor，EF4.1

我已经以最简单的形式实现了网格，即Razor Tables。目前我已经实现了对页面记录字段的编辑，即单击“编辑”，出现编辑页面，然后填写数据然后保存，将用户返回到主网格页面。

我需要一个内联解决方案，其中只有1或2个字段需要更新。通常，用户可以单击该行或“编辑”链接，该行将更改为“编辑模式”。然后，人们可以编辑数据。然后，单击“保存”，该行将采用只读，否则网格将刷新。你能为此推荐一个简单而强大的解决方案吗？目前我不考虑第三方组件解决方案，如Telerik Kendo UI网格，虽然在不久的将来我无疑会升级到这样的东西。目前我想保持简单。

思想，智慧，建议表示赞赏。

非常感谢。

编辑：

谢谢大家。我将尝试这些建议。

Answer 1

这是最简单的方法，请参阅fiddle。

使用JSON Web服务保存所有数据。你最终会得到一组单元格或一组单元格数组。（或者，您可以将JSON放在隐藏的输入框中）

使用$ .data api并将服务器所需的所有信息保存在数据属性中。

你最终会有一些简单的事情

var f=$('#myform')
  , t = $('table')
  , inputs = t.find('input')
  , b1 = $('button.save1')
  , b2 = $('button.save2')
  , ta = $('#save')

// update data-val attribute when value changed 
t.on('change', 'input', (e) => $(e.target).data('val', e.target.value))

// store everything in $.data/data-* attributes
b1.on('click', () => {
  	var data = []
  	inputs.each((i,inp) => data.push($(inp).data()) )
	ta.text(JSON.stringify(data))
})

// use $.serialize
b2.on('click', () => {      	
    var data = f.serializeArray()
	ta.text(JSON.stringify(data))
})

input {border : 1px solid #fff;margin:0; font-size:20px; }
input:focus { outline: 1px solid #eee; background-color:#eee; }
table { border : 1px solid #999; border-collapse:collapse;border-spacing:0; }
table td { padding:0; margin:0;border:1px solid #999; }
table th { background-color: #aaa; min-width:20px;border:1px solid #999; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name='myform' id='myform'>
<table>
    <tr>
        <th></th>
        <th>A</th>
        <th>B</th>
        <th>C</th>
    </tr>
    <tr data-row="0">
        <th>1</th>
        <td><input type="text" data-row="0" data-col="0" data-val="a" value="a" name='data[0][0]'/></td>
        <td><input type="text" data-row="0" data-col="1" data-val="b" value="b" name='data[0][1]'/></td>
        <td><input type="text" data-row="0" data-col="2" data-val="c" value="c" name='data[0][2]'/></td>
    </tr>
    <tr data-row="1">
        <th>2</th>
        <td><input type="text" data-row="1" data-col="0" data-val="d" value="d" name='data[1][0]'/></td>
        <td><input type="text" data-row="1" data-col="1" data-val="e" value="e" name='data[1][1]'/></td>
        <td><input type="text" data-row="1" data-col="2" data-val="f" value="f" name='data[1][2]'/></td>
    </tr>
    <tr data-row="2">
        <th>3</th>
        <td><input type="text" data-row="2" data-col="0" data-val="g" value="g" name='data[2][0]' /></td>
        <td><input type="text" data-row="2" data-col="1" data-val="h" value="h" name='data[2][1]' /></td>
        <td><input type="text" data-row="2" data-col="2" data-val="i" value="i" name='data[2][2]' /></td>
    </tr>
</table>
</form>
<div name="data" id="save" cols="30" rows="10"></div>
<button class='save1'>Save 1</button>
<button class='save2'>Save 2</button>

鉴于您在Razor视图中生成表，并且不需要将数据加载到表中。因此，您可以在服务器上“加载”数据并使用上面的微小JS片段保存更改。

您还可以在表格中设置输入单元格的样式，以便在使用焦点时看起来不同，使其看起来像Excel电子表格（不过看起来没有精美的Excel功能）。

Answer 2

那么在这种情况下，我建议你为每个网格行添加一个唯一id的div。并在单击编辑按钮时使用java脚本插入具有值的文本框的行。

Answer 3

使用knockout.js是我的首选方法，在我看来，开始时很简单，但足够灵活，能够满足项目需求。

以下是示例：

http://www.knockmeout.net/2011/03/guard-your-model-accept-or-cancel-edits.html

http://knockoutjs.com/examples/gridEditor.html

如果你认为这是给你的，那么花一两个小时来完成教程，非常值得花时间：

http://learn.knockoutjs.com/

Answer 4

我已经完全按照你的要求实施了，但我无法向你保证它是强大的。这绝对不简单。根据Stuart Leeks的文章Get the Most out of WebGrid in ASP.NET MVC，我创建了一个MVC项目，我用我自己的javascript进行了大量修改。最后，我提出了一个有效但可以大大改进的解决方案。花了我至少一个星期来实施。

Answer 5

我编写了使用mvc实现内联可编辑网格的教程，带有源代码的knockoutjs： http://www.anhbui.net/blog?id=kojs-1

推荐的方法来实现MVC网格的内联编辑吗？

5 个答案: