我想从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: '编号', '80', align: 'center' }, { field: 'Name', title: '艺术家', '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"); } } |