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

    }

巴特西

esayui-datagrid的使用

最新文章

热门文章