首页 > 代码库 > 获取datagrid选中行的数据,显示到window窗口中
获取datagrid选中行的数据,显示到window窗口中
(在上次随笔代码的基础上)
1.datagrid代码:
<div style="width:100%;height:100%;">
<table class="easyui-datagrid" id="datagridUser" style="width: 100%; height: 95%;" data-options="singleSelect:true,url:‘@Url.Action("GetList")‘,method:‘get‘,toolbar:toolbar" pagination="true" sortname="Id" sortorder="asc">
<thead>
<tr>
<th style="width:10%" data-options="field:‘Id‘" sortable="true">编号</th>
<th style="width:15%" data-options="field:‘Name‘" sortable="true">登录名</th>
<th style="width:15%" data-options="field:‘RealName‘" sortable="true">姓名</th>
<th style="width:15%" data-options="field:‘Sex‘" sortable="true">性别</th>
<th style="width:15%" data-options="field:‘Email‘">邮箱</th>
<th style="width:15%" data-options="field:‘Phone‘">电话</th>
<th style="width:15%" data-options="field:‘Address‘">地址</th>
</tr>
</thead>
</table>
</div>
2.JS代码
<script type="text/javascript">
var toolbar = [{
text: ‘删除用户‘,
iconCls: ‘icon-clear‘,
handler: function () {
var row = $("#datagridUser").datagrid("getSelected");
if (row != null) {
var userId = row.Id;
//执行删除操作
if (confirm("确认删除吗?"))
{
$.ajax({
type: "POST",
url: "/UserManager/DeleteUser",
data: "id=" + userId,
success: function (result) {
if (result == "true") {
$("#datagridUser").datagrid("reload");
}
}
});
}
}
else {
alert("请选择要删除的项!");
}
}
}, {
text: ‘查看详情‘,
iconCls: ‘icon-search‘,
handler: function () {
var row = $("#datagridUser").datagrid("getSelected");
if (row != null) {
//绑定窗体数据
var userId = row.Id;
//执行查询操作
$.ajax({
type: "get",
url: "/UserManager/GetUser",
data: "id=" + userId,
success: function (jsonUserInfo) {
var json = JSON.parse(jsonUserInfo);
$("#textInfoName").val(json.Name);
$("#textInfoRealName").val(json.RealName);
$("#textInfoSex").val(json.Sex);
$("#textInfoEmail").val(json.Email);
$("#textInfoPhone").val(json.Phone);
$("#textInfoAddress").val(json.Address);
//打开窗口,居中显示
$(‘#windowUserInfo‘).window({
top: ($(window).height() - 300) * 0.5,
left: ($(window).width() - 500) * 0.5,
}).window(‘open‘);
}
});
}
else {
alert("请选择用户!");
}
}
}];
</script>
注:var row = $("#datagridUser").datagrid("getSelected")获取选中行;var userId = row.Id 获取该行数据的ID; url: "/UserManager/GetUser" ajax调用action获取数据;我的action传回的是json字符串;$("#textInfoName").val(json.Name) 绑定显示数据。
3.control
[HttpPost]
public ActionResult DeleteUser(int id)
{
var user = userService.Get(x => x.Id == id); //获取要删除的User
if (userService.Delete(user))
{
return Content("true");
}
else
{
return Content("false");
}
}
[HttpGet]
public string GetUser(int id)
{
var user = userService.Get(x => x.Id == id); //获取要删除的User
var json = JsonConvert.SerializeObject(user);
return json;
}
注:代码只有部分,备忘方便以后查看
获取datagrid选中行的数据,显示到window窗口中