esayui-datagrid的使用

第一步：在页面上引入easyui的jQuery链接

  <script src="../../Scripts/easyUI/jquery-1.7.2.min.js" type="text/javascript"></script>
     <script src="../../Scripts/easyUI/jquery.easyui.min.js" type="text/javascript"></script>
     <script src="../../Scripts/easyUI/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
     <link href="../../Scripts/easyUI/themes/gray/easyui.css" rel="stylesheet" type="text/css" />
     <link href="../../Scripts/easyUI/themes/icon.css" rel="stylesheet" type="text/css" />

记住jquery-1.7.2.min.js这个文件要放在最前面，不然会出现jQuery未定义的错误

第二步：第一个table用来承载datagrid

 <table id="tab_list">
     </table>

第三步：初始化datagrid（由于我用的是MVC故url对应的是控制器中的controller/Action）

 <script type="text/javascript">
         $(function () {
             InitGird();
         }
         )

  //初始化表格
         function InitGird() {
             $('#tab_list').datagrid({
                 title: '员工列表', //表格标题
                 //                 url: location.href, //请求数据的页面
                 url: '/DataGrid/GetJson ', //请求数据的页面
                 sortName: 'ID', //排序字段
                 idField: 'ID', //标识字段,主键
                 iconCls: '', //标题左边的图标
                 width: '80%', //宽度
                 height: $(parent.document).find("#mainPanle").height() -  >  ? $(parent.document).find("#mainPanle").height() -  : , //高度
                 nowrap: false, //是否换行，True 就会把数据显示在一行里
                 striped: true, //True 奇偶行使用不同背景色
                 collapsible: false, //可折叠
                 sortOrder: 'desc', //排序类型
                 remoteSort: true, //定义是否从服务器给数据排序
                 frozenColumns: [[//冻结的列，不会随横向滚动轴移动
                     {field: 'cbx', checkbox: true },
                     { title: '员工姓名', field: 'Name', width: , sortable: true },
                     { title: '住址', field: 'Address', width:  }
                 ]],
                 columns: [[
                 //  { title: '电话', field: 'Tel', formatter: function (value, rec, index) { return value == 0 ? '管理员' : '普通用户' }, width: 120 },
                 //  { title: '是否超级管理员', field: 'JSON_isadmin',formatter:function(value,rec,index){return value==0?'否':'是'}, width: 100 },
                     {title: '电话', field: 'Tel', width:  },
                     { title: '部门', field: 'Department', width:  },
                     { title: '性别', field: 'Gender', width:  },
                     {title: '邮箱地址', field: 'Email', width:  },
                     { title: '操作', field: 'ID', width: , formatter: function (value, rec) {
                         return '<a style="color:red" href="javascript:;" onclick="EditData(' + value + ');$(this).parent().click();return false;">修改</a>';
                     }
                     }
                 ]],
                 toolbar: "#tab_toolbar",
                 queryParams: { "GetJson": "index" },
                 pagination: true, //是否开启分页
                 pageNumber: , //默认索引页
                 pageSize: , //默认一页数据条数
                 rownumbers: true //行号
                // data:<%=ViewData["xx"]%>
             });

         }
  </script>

第四步：控制器中返回数据

        [HttpPost]
        public ActionResult GetJson()
        {
            //StringBuilder JsonString = new StringBuilder();
            //EmployeInfo item = new EmployeInfo()
            //{
            //    ID = 1,
            //    Name = "陈力宏",
            //    Address = "南浦",
            //    Tel = "13902872166",
            //    DepID = 1,
            //    Gender = "男",
            //    Email = "123@qq.com"
            //};
            //JsonString.Append("{");
            //JsonString.Append("\"rows\":[ ");
            //JsonString.Append("{");
            //JsonString.Append("\"ID\":" + "\"" + item.ID + "\",");
            //JsonString.Append("\"Name\":" + "\"" + item.Name.ToString() + "\",");
            //JsonString.Append("\"Address\":" + "\"" + item.Address.ToString() + "\",");
            //JsonString.Append("\"Tel\":" + "\"" + item.Tel.ToString() + "\",");
            //JsonString.Append("\"Department\":" + "\"" + item.DepID.ToString() + "\",");
            //JsonString.Append("\"Gender\":" + "\"" + item.Gender.ToString() + "\",");
            //JsonString.Append("\"Email\":" + "\"" + item.Email.ToString() + "\"");
            //JsonString.Append("}]");
            //JsonString.Append(",");
            //JsonString.Append("\"total\":");
            //JsonString.Append(1);
            //JsonString.Append("}");
            // return View("88888");
            ////ViewData["xx"] = JsonString.ToString();
            UserManagerServiceClient client = new UserManagerServiceClient(); //WCF服务中取出数据
            //string test = client.GetDepartmentNodes(1002);
            string JsonString = client.GetEmployee();
              return Content(JsonString); //用Content返回json
            // return Content(JsonString.ToString());

        }

第五步：WCF中

     /// <summary>
         ///获取员工信息
         /// </summary>
         /// <returns></returns>
         public string GetEmployee()
         {
             try
             {
                 using (UserManageDB db = new UserManageDB())
                 {
                     List<EmployeInfo> employeInfoList = db.EmployeInfo.ToList();
                     string Json = ModelTOJson(employeInfoList);
                     return Json;
                 }
             }
             catch (Exception ex)
             {
                 throw ex;
             }
         }

         /// <summary>
         ///
         /// </summary>
         /// <param name="employeInfoList"></param>
         /// <returns></returns>
         private string ModelTOJson(List<EmployeInfo> employeInfoList)
         {
             StringBuilder JsonString = new StringBuilder();

             if (employeInfoList.Count > )
             {
                 JsonString.Append("{");
                 JsonString.Append("\"rows\":[");
                 int count = ;
                 foreach (var item in employeInfoList)
                 {

                     JsonString.Append("{");
                     JsonString.Append("\"ID\":" + "\"" + item.ID + "\",");
                     //TODO:Replace()去掉特殊字符如：\ 和"
                     JsonString.Append("\"Name\":" +"\"" + item.Name.ToString() + "\"," );
                     JsonString.Append("\"Address\":" + "\"" + item.Address.ToString() +"\",");
                     JsonString.Append("\"Tel\":" + "\"" + item.Tel.ToString() + "\",");
                     JsonString.Append("\"Department\":" + "\"" + item.DepID.ToString() + "\"," ); //TODO:查找部门
                     JsonString.Append("\"Gender\":" + "\"" + item.Gender.ToString() + "\"," );
                     count++;
                     if (employeInfoList.Count == count)
                     {
                         JsonString.Append("\"Email\":" + "\"" + item.Email.ToString() + "\"}" );
                     }
                     else
                     {
                          JsonString.Append("\"Email\":" + "\"" + item.Email.ToString() + "\"}," );
                     }
                 }
                 JsonString.Append("]");
                 JsonString.Append(",");
                 JsonString.Append("\"total\":");
                 JsonString.Append(count);
                 JsonString.Append("}");
             }
            return JsonString.ToString();
         }
     }

Entityframework

  public class UserManageDB : DbContext
    {
        public UserManageDB()
            : base("name = conn")
        {
            Database.SetInitializer<UserManageDB>(null);
        }

        public IDbSet<Department> Department { get; set;}
        public IDbSet<EmployeInfo> EmployeInfo { get; set; }
    }

App.config

    <add name="conn" providerName="System.Data.SqlClient" connectionString="Server=Chenlh-PC\SQL2012;Database=UserManage;uid=sa;pwd=Chenlh123;Persist Security Info=True;" />

Model

 /// <summary>
    /// 员工信息
    /// </summary>
    [DataContract]
    [Table("dt_Employee")]
    [Serializable]
    public class EmployeInfo
    {
        #region 自定义成员变量

        private int m_ID;
        private string m_Name;
        private string m_Address;
        private string m_Tel;
        private int m_DepID;  //部门ID
        private string m_Gender;
        private string m_Email;

        #endregion

        #region 公共属性

        /// <summary>
        /// 员工ID号
        /// </summary>
        [DataMember]
        [Column("ID")]
        [Key]
        public int ID
        {
            get
            {
                return m_ID;
            }
            set
            {
                m_ID = value;
            }
        }

        /// <summary>
        /// 员工姓名
        /// </summary>
        [DataMember]
        [Column("EmployeeName")]
        public string Name
        {
            get
            {
                return m_Name;
            }
            set
            {
                m_Name = value;
            }
        }

        /// <summary>
        /// 员工地址
        /// </summary>
        [DataMember]
        [Column("Address")]
        public string Address
        {
            get
            {
                return m_Address;
            }
            set
            {
                m_Address = value;
            }
        }

        /// <summary>
        /// 员工电话
        /// </summary>
        [DataMember]
        [Column("Tel")]
        public string Tel
        {
            get
            {
                return m_Tel;
            }
            set
            {
                m_Tel = value;
            }
        }

        /// <summary>
        /// 员工所属部门
        /// </summary>
        [DataMember]
        [Column("DepID")]
        public int DepID
        {
            get
            {
                return m_DepID;
            }
            set
            {
                m_DepID = value;
            }
        }

        /// <summary>
        /// 员工性别
        /// </summary>
        [DataMember]
        [Column("Gender")]
        public string Gender
        {
            get
            {
                return m_Gender;
            }
            set
            {
                m_Gender = value;
            }
        }

        /// <summary>
        /// 员工的Email
        /// </summary>
        [DataMember]
        [Column("Email")]
        public string Email
        {
            get
            {
                return m_Email;
            }
            set
            {
                m_Email = value;
            }
        }
        #endregion
    }