我正在尝试实现Grid.Mvc详细信息,如其页面和http://gridmvc.codeplex.com/上的“示例屏幕截图”所示
在这里,单击任一行,在右侧显示“订单详细信息”?目标是实现此目标,在其中添加ActionLinks以执行诸如原始Bootstrap /实体框架index()视图所具有的操作,例如Edit / Details / Delete。
问题是如何正确连接,
@Html.Grid(Model).Named("ordersGrid").Columns(columns =>
{
columns.Add(model => model.ID).Titled("ID").SetWidth(10);
columns.Add(model => model.CustomerNumber).Titled("Cust #").SetWidth(10);
}).WithPaging(10)
<div class="row">
<div class="col-md-3 col-md-push-9">
<h4>
Order details
</h4>
<div id="order-content">
<p class="muted">
Select order to display detailed infomation
</p>
</div>
</div>
<script>
$(function () {
pageGrids.ast.onRowSelect(function (e) {
alert(e.row.ID);
$.post(e.row, function (data) {
//if (data.Status <= 0) {
// alert(data.Message);
// return;
//}
$("#order-content").html(e.row);
});
});
});
</script>
可以,因为它不是在行单击时触发的,因为/Shared/_Layout.cshtml中需要引用,因此必须下载jquery.min.js并重命名以匹配。
<script src="@Url.Content("~/Scripts/jquery.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/gridmvc.min.js")" type="text/javascript"></script>
现在,它的触发和单击的任何行都将获得带有ID号的警报对话框。
但是在$ .post(e.row,function(data){中,这未填写名为“#order-content”的div中的任何详细信息,UPDATED:修复了函数的语法及其工作方式。
<script>
$(function () {
pageGrids.ast.onRowSelect(function (e) {
alert(e.row.ID);
$.post("/astroidreports/details/" +e.row.ID,
function(data){
$("#order-content").html(data);
})
});
});
最佳答案
您的网格名称与javascript不匹配:
@Html.Grid(Model).Named("ordersGrid") <--- you name it here, change to "ast"
.Columns(columns =>
{
columns.Add(model => model.ID).Titled("ID").SetWidth(10);
columns.Add(model => model.CustomerNumber).Titled("Cust #").SetWidth(10);
}).WithPaging(10)
<script>
$(function () {
pageGrids.ast.onRowSelect(function (e) { <--- expects grid name "ast"
alert(e.row.ID);
$.post(e.row, function (data) {
//if (data.Status <= 0) {
// alert(data.Message);
// return;
//}
$("#order-content").html(e.row);
});
});
});
</script>
关于asp.net-mvc - 单击Grid.Mvc列详细信息?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/32383094/