Mvc网格可编辑 [英] Mvc web grid editable

问题描述

我有带可编辑列的MVC网格，但用户不喜欢编辑所有列。管理员或用户需要将某些列定义为可编辑且某些列不能动态编辑。

（我们有单独的部分用于管理员设置，这里需要定义哪些列需要可编辑）



任何人都可以帮助我...



我尝试过：



网格视图：



@ grid.GetHtml（tableStyle：webGrid，headerStyle：header，alternatingRowStyle：altColor，

列：grid.Columns（

grid.Column（，style：button，

格式：

@< text>

< button class =edit-case readid =@ item.ReferenceID>编辑< / button>



< button class =update-case editid =@ item.ReferenceID>更新< / button>

< button class =cancel-case editid =@ item.ReferenceID>取消< / button>

），

grid.Column（ParentSSN ，canSort：false，

格式：

@< text>

@ item.ParentSSN

< input type =textid =ParentSSNvalue =@ item.ParentSSNclass =edit/>



），

grid.Column（SSN），

grid.Column（CAT），
grid.Column（Name），

grid.Column（MaritalStatus），

grid.Column（PhoneNumber），

grid.Column（FacilityID），



grid.Column（FacilityAddress），

grid。列（县），

grid.Column（ParentName），

grid.Column（ParentAddress），

grid .Column（PhoneNumber1））





）



Jquery代码：



< script type =text / javascript>

$（function（）{

$（'。edit'）。hide（）;

$（'。edit-case'）。on （'click'，function（）{

var tr = $（this）.parents（'tr：first'）;

tr.find（'。edit， .read'）。toggle（）;

}）;

$（'。update-case'）。on（'click'，function（e）{< br $> b $ b调试器;

e.preventDefault（）;

var tr = $（this）.parents（'tr：first'）;

id = $（this）.prop（'id'）;

var ParentSSN = tr.find（'＃ParentSSN'）。val（）;

var ddlcat = $（'＃ddlcat'）。val（）;

var ddlmarital = $（'＃ddlmarital'）。val（）;

var ddlparentSSN = $（'＃ddlparentSSN'）。val（）;

$ .ajax（{

type：POST，

contentType：application / json; charset = utf-8，

url：/ Home / Edit，

data：JSON.stringify（{id：id，ParentSSN：ParentSSN ，CAT：ddlcat，MaritalStatus：ddlmarital，DllParentSSN：ddlparentSSN}），

dataType：json，

成功：函数（数据）{

调试器;

tr.find（'。edit，.read'）。toggle（）;

$（'。edit'） .hide（）;

调试器;

alert（成功）;

alert（data.ParentSSN）;

alert（data）;

tr.find（'＃ParentSSN'）。text（data.ParentSSN）;

tr.find（'＃spanid'） .text（data.ParentSSN）;

}，

错误：函数（错误）{

alert（error）;

}

}）;

}）;

$（'。cancel-case'）。on（'click'，function（e）{

e.preventDefault（）;

var tr = $（this）.parents（'tr：first'）;

var id = $（this）.prop（ 'id'）;

tr.find（'。edit，.read'）。toggle（）;

$（'。edit'）。hide（）;

}）;



}）;

< / script>

I have MVC web grid with editable columns, but user is not like to edit all columns.Admin or users need to define certain columns to be editable and certain column not to editable dynamically.
(we have separate part for admin setting, here need to define which columns need to be editable)

Any one can help me with that..

What I have tried:

Grid View:

@grid.GetHtml(tableStyle: "webGrid", headerStyle: "header", alternatingRowStyle: "altColor",
columns:grid.Columns(
grid.Column("", style: "button",
format:
@<text>
<button class="edit-case read" id="@item.ReferenceID">Edit</button>

<button class="update-case edit" id="@item.ReferenceID">Update</button>
<button class="cancel-case edit" id="@item.ReferenceID">Cancel</button>
),
grid.Column("ParentSSN",canSort:false,
format:
@<text>
@item.ParentSSN
<input type="text" id="ParentSSN" value="@item.ParentSSN" class="edit" />

),
grid.Column("SSN"),
grid.Column("CAT"),
grid.Column("Name"),
grid.Column("MaritalStatus"),
grid.Column("PhoneNumber"),
grid.Column("FacilityID"),

grid.Column("FacilityAddress"),
grid.Column("County"),
grid.Column("ParentName"),
grid.Column("ParentAddress"),
grid.Column("PhoneNumber1"))


)

Jquery code:

<script type="text/javascript" >
$(function () {
$('.edit').hide();
$('.edit-case').on('click', function () {
var tr = $(this).parents('tr:first');
tr.find('.edit, .read').toggle();
});
$('.update-case').on('click', function (e) {
debugger;
e.preventDefault();
var tr = $(this).parents('tr:first');
id = $(this).prop('id');
var ParentSSN = tr.find('#ParentSSN').val();
var ddlcat = $('#ddlcat').val();
var ddlmarital = $('#ddlmarital').val();
var ddlparentSSN = $('#ddlparentSSN').val();
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "/Home/Edit",
data: JSON.stringify({ "id": id, "ParentSSN": ParentSSN, "CAT": ddlcat, "MaritalStatus": ddlmarital, "DllParentSSN": ddlparentSSN }),
dataType: "json",
success: function (data) {
debugger;
tr.find('.edit, .read').toggle();
$('.edit').hide();
debugger;
alert("success");
alert(data.ParentSSN);
alert(data);
tr.find('#ParentSSN').text(data.ParentSSN);
tr.find('#spanid').text(data.ParentSSN);
},
error: function (err) {
alert("error");
}
});
});
$('.cancel-case').on('click', function (e) {
e.preventDefault();
var tr = $(this).parents('tr:first');
var id = $(this).prop('id');
tr.find('.edit, .read').toggle();
$('.edit').hide();
});

});
</script>

推荐答案

（function（）{

(function () {

（'。edit'）。hide（）;

('.edit').hide();

（'。edit-case'）。on（'click'，function（）{

var tr =

('.edit-case').on('click', function () {
var tr =

这篇关于Mvc网格可编辑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！