我想從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"); } } |