9

我正在使用 MVC3、C#、Razor、EF4.1

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

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

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

非常感谢。

编辑：

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

4

5 回答 5

10

这是最简单的方法，请参见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 功能，只是看看）。

于 2013-09-19T14:10:44.547 回答
2

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

于 2013-09-19T13:32:37.440 回答
2

使用 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/

于 2013-09-19T13:49:56.130 回答
1

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

于 2013-09-19T13:27:20.327 回答
0

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

于 2015-04-09T06:57:41.210 回答