我想从Datagrid选择一条数据,然后点击编辑按钮,就把该条记录信息显示到window上的form里面.效果如图:

Js代码.

<script type="text/javascript">

$(function () {

$('#w').window('close'); //默认关闭窗口

$('#test').datagrid({

title: '艺术家管理', //标题

iconCls: 'icon-save', //图标

fit: true, //全屏

striped: true, //显示斑马线

url: '/ArtistManage/LoadAllByPage/', //数据来源

sortName: 'ArtistId', //排序字段

idField: 'ArtistId', //标识字段

frozenColumns: [[{ field: 'ck', checkbox: true}]], //固定字段

columns: [[

{ field: 'ArtistId', title: '编号', width: '80', align: 'center' },

{ field: 'Name', title: '艺术家', width: '200', align: 'left' }

]], //表字段

pagination: true, //分页工具条

rownumbers: true, //显示行号

//工具条

toolbar: [{

id: 'btnadd',

text: '添加',

iconCls: 'icon-add',

handler: function () {

$('#w').window('open');

$('#artist').form('load', '/ArtistManage/View');

}

}, {

id: 'btnupdate',

text: '修改',

iconCls: 'icon-save',

handler: function () {

//$.messager.alert('提示', '请选择要修改的数据', 'info');

var rows = $('#test').datagrid('getSelected');

if (rows) {

// $.getJSON('/ArtistManage/View/', { id: rows.ArtistId }, function (data) {

// $.messager.alert('ddd');

// });

//$('#rr').form.load('/ArtistManage/View/', { id: rows.ArtistId });

$('#artist').form('load', '/ArtistManage/View/' + rows.ArtistId); //官网例子说可以是.json文件.这里返回的是json格式的数据.但就是不显示.

$('#w').window('open');

}

else {

$.messager.alert('提示', '请选择要修改的数据', 'info');

}

}

}, {

id: 'btndelete',

text: '删除',

iconCls: 'icon-cut',

handler: function () {

$.messager.alert('提示', '请选择要修改的数据', 'info');

}

}]

});

});

</script>

Html代码

<body class="easyui-layout">

<div region="center" style="padding: 5px;" border="false">

<table id="test">

</table>

</div>

<div id="w" class="easyui-window" title="艺术家信息" collapsible="false" minimizable="false"

maximizable="false" icon="icon-save" style="width: 300px; height: 120px; padding: 5px;

background: #fafafa;" shadow="false">

<div class="easyui-layout" fit="true">

<div region="center" border="false" style="padding: 10px; background: #fff; border: 1px solid #ccc;">

<input type="hidden" name="artistId" />

<table>

<tr>

<td style="width: 60px">艺术家</td>

<td>

<input type="text" name="name" class="easyui-validatebox" required="true" />

</td>

</tr>

</table>

</div>

<div region="south" border="false" style="text-align: right; height: 30px; line-height: 30px;">

<a class="easyui-linkbutton" iconcls="icon-ok" href="javascript:void(0)" onclick="save()">

保存</a> <a class="easyui-linkbutton" iconcls="icon-cancel" href="javascript:void(0)">

取消</a>

</div>

</div>

</div>

</body>

后台Controller

public class ArtistManageController : Controller

{

MusicStoreDbDataContext msdb = new MusicStoreDbDataContext();

public ActionResult Index()

{

return View();

}

 

//分页加载艺术家表

public ActionResult LoadAllByPage(int page, int rows, string order, string sort)

{

int total = 0;

var viewModel =

from artist in msdb.Artist

select new { ArtistId = artist.ArtistId, Name = artist.Name };

var artists = viewModel.OrderBy(m => m.ArtistId).Skip(rows * (page - 1)).Take(rows);

total = viewModel.Count();

var result = new { total = total, rows = artists.ToList() };

var s = Json(result);

return Json(result);

}

 

//添加/编辑用户信息

public JsonResult View(int? id)

{

Artist artist =

(from a in msdb.Artist

where a.ArtistId == id

select a).FirstOrDefault();

if (artist == null)

artist = new Artist();

var result = new { artistId = artist.ArtistId, name = artist.Name };

return Json(result, "text/x-json");

}

}