第一步：在页面上引入easyui的jQuery链接
1 <script src="../../Scripts/easyUI/jquery-1.7.2.min.js" type="text/javascript"></script> 2 <script src="../../Scripts/easyUI/jquery.easyui.min.js" type="text/javascript"></script> 3 <script src="../../Scripts/easyUI/locale/easyui-lang-zh_CN.js" type="text/javascript"></script> 4 <link href="../../Scripts/easyUI/themes/gray/easyui.css" rel="stylesheet" type="text/css" /> 5 <link href="../../Scripts/easyUI/themes/icon.css" rel="stylesheet" type="text/css" />
记住jquery-1.7.2.min.js这个文件要放在最前面，不然会出现jQuery未定义的错误
第二步：第一个table用来承载datagrid
1 <table id="tab_list"> 2 </table>
第三步：初始化datagrid（由于我用的是MVC故url对应的是控制器中的controller/Action）
1 <script type="text/javascript"> 2 $(function () { 3 InitGird(); 4 } 5 ) 6 7 //初始化表格 8 function InitGird() { 9 $('#tab_list').datagrid({ 10 title: '员工列表', //表格标题 11 // url: location.href, //请求数据的页面 12 url: '/DataGrid/GetJson ', //请求数据的页面 13 sortName: 'ID', //排序字段 14 idField: 'ID', //标识字段,主键 15 iconCls: '', //标题左边的图标 16 '80%', //宽度 17 height: $(parent.document).find("#mainPanle").height() - 10 > 0 ? $(parent.document).find("#mainPanle").height() - 10 : 500, //高度 18 nowrap: false, //是否换行，True 就会把数据显示在一行里 19 striped: true, //True 奇偶行使用不同背景色 20 collapsible: false, //可折叠 21 sortOrder: 'desc', //排序类型 22 remoteSort: true, //定义是否从服务器给数据排序 23 frozenColumns: [[//冻结的列，不会随横向滚动轴移动 24 {field: 'cbx', checkbox: true }, 25 { title: '员工姓名', field: 'Name', 150, sortable: true }, 26 { title: '住址', field: 'Address', 150 } 27 ]], 28 columns: [[ 29 // { title: '电话', field: 'Tel', formatter: function (value, rec, index) { return value == 0 ? '管理员' : '普通用户' }, 120 }, 30 // { title: '是否超级管理员', field: 'JSON_isadmin',formatter:function(value,rec,index){return value==0?'否':'是'}, 100 }, 31 {title: '电话', field: 'Tel', 150 }, 32 { title: '部门', field: 'Department', 150 }, 33 { title: '性别', field: 'Gender', 150 }, 34 {title: '邮箱地址', field: 'Email', 150 }, 35 { title: '操作', field: 'ID', 80, formatter: function (value, rec) { 36 return '<a style="color:red" href="javascript:;" onclick="EditData(' + value + ');$(this).parent().click();return false;">修改</a>'; 37 } 38 } 39 ]], 40 toolbar: "#tab_toolbar", 41 queryParams: { "GetJson": "index" }, 42 pagination: true, //是否开启分页 43 pageNumber: 1, //默认索引页 44 pageSize: 10, //默认一页数据条数 45 rownumbers: true //行号 46 // data:<%=ViewData["xx"]%> 47 }); 48 49 } 50 </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中
1 /// <summary> 2 ///获取员工信息 3 /// </summary> 4 /// <returns></returns> 5 public string GetEmployee() 6 { 7 try 8 { 9 using (UserManageDB db = new UserManageDB()) 10 { 11 List<EmployeInfo> employeInfoList = db.EmployeInfo.ToList(); 12 string Json = ModelTOJson(employeInfoList); 13 return Json; 14 } 15 } 16 catch (Exception ex) 17 { 18 throw ex; 19 } 20 } 21 22 /// <summary> 23 /// 24 /// </summary> 25 /// <param name="employeInfoList"></param> 26 /// <returns></returns> 27 private string ModelTOJson(List<EmployeInfo> employeInfoList) 28 { 29 StringBuilder JsonString = new StringBuilder(); 30 31 if (employeInfoList.Count > 0) 32 { 33 JsonString.Append("{"); 34 JsonString.Append(""rows":["); 35 int count = 0; 36 foreach (var item in employeInfoList) 37 { 38 39 JsonString.Append("{"); 40 JsonString.Append(""ID":" + """ + item.ID + "","); 41 //TODO:Replace()去掉特殊字符如： 和" 42 JsonString.Append(""Name":" +""" + item.Name.ToString() + ""," ); 43 JsonString.Append(""Address":" + """ + item.Address.ToString() +"","); 44 JsonString.Append(""Tel":" + """ + item.Tel.ToString() + "","); 45 JsonString.Append(""Department":" + """ + item.DepID.ToString() + ""," ); //TODO:查找部门 46 JsonString.Append(""Gender":" + """ + item.Gender.ToString() + ""," ); 47 count++; 48 if (employeInfoList.Count == count) 49 { 50 JsonString.Append(""Email":" + """ + item.Email.ToString() + ""}" ); 51 } 52 else 53 { 54 JsonString.Append(""Email":" + """ + item.Email.ToString() + ""}," ); 55 } 56 } 57 JsonString.Append("]"); 58 JsonString.Append(","); 59 JsonString.Append(""total":"); 60 JsonString.Append(count); 61 JsonString.Append("}"); 62 } 63 return JsonString.ToString(); 64 } 65 }
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-PCSQL2012;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 }