Rub*_*ans 16 javascript grid jquery jquery-ui slickgrid
嗨,我正在看SlickGrid,我可以看到如何编辑单元格的示例,但是我是否保存这些更改.我还没有找到一个告诉我如何做到这一点的例子.
Jim*_*ran 18
保存SlickGrid的技巧是实现网格将更新您在编辑单元格时创建网格时提供的数据数组.
然后我保存的方式是包含一个带有提交按钮和网格下方隐藏字段的表单.我捕获了submit事件并使用JSON插件序列化数组并将其放在隐藏字段中.在服务器端,您将收到一个JSON字符串,您可以对其进行反序列化,循环并写入数据库.
假设您的数据数组像样本一样被称为"数据",以下内容应该适用于您:
<form action="?" method="POST">
<input type="submit" value="Save">
<input type="hidden" name="data" value="">
</form>
<script>
$(function() {
$("form").submit(
function() {
$("input[name='data']").val($.JSON.encode(data));
}
);
});
</script>
小智 16
为了完整性,一个最小的例子展示了在Jim OHalloran的帖子中提到的onCellChange的用法.
有关更多信息,以及查看可以与onCellChange类似使用的所有事件,请参阅SlickGrid源代码开头的注释.
<head>
<!-- boilerplate omitted ... -->
<script type="text/javascript">
var grid;
var options = {
enableCellNavigation: true,
enableColumnReorder: false,
autoEdit: false,
editable: true,
};
var columns = [
{id: "item_key", name: "Key", field: "item_key" },
{id: "value", name: "value", field: "value", editor: LongTextCellEditor }
];
var data = [
{item_key: "item1", value: "val1"},
{item_key: "item2", value: "val2"},
];
$(document).ready(function () {
grid = new Slick.Grid($("#myGrid"), data, columns, options);
//Earlier code for earlier version of slickgrid
// grid.onCellChange = function (currentRow, currentCell, item) {
// alert(currentRow+":"+currentCell+"> key="+item['item_key']+", value="+item['value']);
//Updated code as per comment.
grid.onCellChange.subscribe(function (e,args) {
console.log(args);
});
};
});
</script>
</head>
<body>
<div id="myGrid" style="height:10em;"> </div>
</body>