EasyUI DataGrid与ASP.NET MVC 实现数据的编辑，保存 （转）

数据绑定包括如下步骤：

• 后台通过json返回数据

• namespace MvcMusicStore.Controllers
  
  { 
  public class StoreManagerController : Controller
  
  {
  private MusicStoreDB db = new MusicStoreDB();
   
  public ActionResult AlbumList()
  
  {
  var albums = from album in db.Albums 
  
  select new {album.AlbumId, album.Title, album.Price, album.AlbumArtUrl};
  
  return this.Json(albums.ToList(), JsonRequestBehavior.AllowGet);
  
  }
  }

  在前端创建grid并指定url

• @{
  ViewBag.Title = "Home Page";
  }
  @section scripts {
  <link href="@Url.Content("~/Content/themes/default/easyui.css")" rel="stylesheet" type="text/css" />
  <link href="@Url.Content("~/Content/themes/icon.css")" rel="stylesheet" type="text/css" />
  <script src="@Url.Content("~/Scripts/jquery.easyui.min.js")" type="text/javascript"></script>
  <script type="text/javascript">
  var lastIndex = -1;
  $(function () {
  $("#tt").datagrid({
  url: "/StoreManager/AlbumList",
  type: "post",
  datatype: "json",
  loadMsg: "数据加载中，请稍后...",
  nowrap: false,
  rownumbers: false,
  singleSelect: true,
  showFooter: true,
  fit: false,
  fitColumns: false,
  onClickRow: function (rowIndex) {
  if (lastIndex != rowIndex) {
  $('#tt').datagrid('endEdit', lastIndex);
  $('#tt').datagrid('beginEdit', rowIndex);
  }
  lastIndex = rowIndex;
  } 
  });
  });
  </script>
  }
  <h2>@ViewBag.Message</h2>
  <p>
  To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.
  </p>
  <div id="dailydeal">
  @Ajax.ActionLink("Click here to see today’s special!",
  "DailyDeal",
  new AjaxOptions{
  UpdateTargetId = "dailydeal",
  InsertionMode=InsertionMode.InsertAfter,
  HttpMethod="GET"}
  )
  </div>
  <table id="tt" class="easyui-datagrid" style="width:auto;height:auto;" singleselect = "true" showHeader="true">
  <thead >
  <tr >
  <th field="AlbumId" width="80">AlbumId</th>
  <th field="Title" width="100" editor="text">Title</th>
  <th field="Price" width="80" align="right" editor="text">List Price</th>
  <th field="AlbumArtUrl" width="80" align="right" editor="text">AlbumArtUrl</th> 
  </tr> 
  </thead> 
  </table>

  问题：
  显示出来的表格中表头和单元格没有对齐，怎么回事？ 
  花了很长时间才知道是ASP.NET向导生成代码中的css与easyui的css设置有冲突。删除site.css中padding:5px即可
  table
  
  td {
  padding: 5px;
  border: solid 1px #e8eef4;
  }
  
  
  注意，width必须设置，否则fitColumn为true时会出错。删除demo中datagrid3.html列属性的width就可以重现这一问题
  我希望datagrid自动显示服务器返回的所有数据，而不需要通过table指定需要显示的列，该如何实现？
  参阅：扩展jquery easyui datagrid 之动态绑定列和数据  及 easyui datagrid动态绑定列名和数据 
  有几点需要注意的：首先easyui的datagrid假设传入的数据为[rows:[], total]或[]。如果为后者，datagrid在datafilter处理函数中会将它转换为前者代码为
  loadFilter:function(data){
  if(typeof data.length=="number"&&typeof data.splice=="function"){
  return {total:data.length,rows:data};
  }else{
  return data;
  } 
  其次，因为支持列分组，datagrid接受的column属性为[[{field, title,...}]]格式。结合这两点的发现，示例json代码如下
  public class StoreManagerController : Controller
  {
  private MusicStoreDB db = new MusicStoreDB();
  class Result
  {
  public object[] columns;
  public object rows;
  };
  class column
  {
  public string field;
  public string title;
  public column(string f, string t)
  {
  field = f;
  title = t;
  }
  };
  public ActionResult AlbumList()
  {
  Result result = new Result();
  var albums = from album in db.Albums 
  select new {album.AlbumId, album.Title, album.Price, album.AlbumArtUrl};
  result.rows = albums.ToList();
  List<column> columns = new List<column>();
  columns.Add(new column("AlbumID", "AlbumID"));
  columns.Add(new column("Title", "Title" ));
  columns.Add(new column("Price", "Price" ));
  columns.Add(new column("AlbumArtUrl", "AlbumArtUrl"));
  result.columns = new object[1] { columns};
  ActionResult ret = this.Json(result, JsonRequestBehavior.AllowGet);
  return ret;
  //return this.Json(albums.ToList(), JsonRequestBehavior.AllowGet);
  }
   
   
  上述示例代码中，rows里面已经包含了必要的列属性，如何用script从rows里面提取信息并构造columns属性？
  可以从json中提取列的信息。假设data中数据为{[ID:1, Name:"aa"], [ID:2, Name:"bb"]}.我们可以利用如下代码从json文件中提取变量名，拼接字符串，然后利用eval生成新的json文件
  function dataFilter(data) {
  if (typeof data.length == "number" && typeof data.splice == "function") {
  data = {total:data.length, rows: data };
  }
  if (data.rows.length == 0) {
  $.messager.alert("结果", "没有数据!", "info", null);
  }
  var options = $("#tt").datagrid("options"); //取出当前datagrid的配置
  var strColumns = '[[';
  for (var p in data.rows[0])
  strColumns = strColumns + '{field:"' + p + '",title:"' + p + '", width:10},';
  strColumns = strColumns.slice(0, -1) + ']]';
  options.columns = eval(strColumns); //添加服务器端返回的columns配置信息
  $("#tt").datagrid("createHeader", options); //调用扩展方法，创建表格列
  $("#tt").datagrid("resize"); //重新布局datagrid，因为上面扩展方法调用后，会有一些布局上的小问题
  return {total:data.rows.length, rows:data.rows};
  }
   

  出处：http://jinzhouwan.blog.163.com/blog/static/137164080201272923251510/