第一步：在页面上引入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
}