EasyUI篇之DataGrid

　　EasyUI的datagrid（数据表格）在开发中使用比较频繁，其重要性是不言而喻的。比较常用的功能有，数据展现，数据行选择，数据加载。下面贴上代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript" src="js/jquery-1.11.2.js"></script>
    <script type="text/javascript" src="js/EasyUI/jquery.easyui.min.js"></script>
    <link type="text/css" rel="stylesheet" href="js/EasyUI/themes/default/panel.css" />
    <link type="text/css" rel="stylesheet" href="js/EasyUI/themes/default/linkbutton.css" />
    <link type="text/css" rel="stylesheet" href="js/EasyUI/themes/default/resizable.css" />
    <link type="text/css" rel="stylesheet" href="js/EasyUI/themes/default/pagination.css" />
    <link type="text/css" rel="stylesheet" href="js/EasyUI/themes/default/datagrid.css" />
    <link type="text/css" rel="stylesheet" href="js/EasyUI/themes/default/messager.css" />
    <link type="text/css" rel="stylesheet" href="js/EasyUI/themes/default/window.css" />
    <script type="text/javascript">
        $(function () {
            //datagrid的js创建方法
            //$("#datagrid").datagrid(
            //    {
            //        loadMsg: '加载中...',
            //        selectOnCheck: false,
            //        url: 'DataGridHandler.ashx',
            //        fitColumns: true,
            //        singleSelect: true,
            //        resizable: true,
            //        pagination: true,
            //        rownumbers: true,
            //        pageSize: 30,
            //        pageList: [30, 50, 100]
            //    });
            var p = $("#datagrid").datagrid("getPager");//datagrid分页样式设置
            $(p).pagination({
                //pageSize: 10,//每页显示的记录条数，默认为10 
                //pageList: [5, 10, 15],//可以设置每页记录条数的列表 
                beforePageText: '第',//页数文本框前显示的汉字 
                afterPageText: '页    共 {pages} 页',
                displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录',
                /*onBeforeRefresh:function(){
                    $(this).pagination('loading');
                    alert('before refresh');
                    $(this).pagination('loaded');
                }*/
            });
            $("#btnSearch").click(function () {//datagrid查询
                var name = $("#txt_name").val();
        
            $("#btnLook").click(function () {//查看datagrid选中行
                var row = $("#datagrid").datagrid("getSelected");//获取选中行的Id值,这个比较特殊，因为绑定到checkbox中，可以通过这种方式获取
                if (row == null)
                    $.messager.alert("提示","没有选中行");
                else {
                    var id = $("#datagrid").datagrid("getRowIndex", row);
                    var data = "你选择的行的id为:"+id+",name为：" + row.name + ",code为：" + row.code +",price为：" + row.price;
                    $.messager.alert("提示",data);
                }
            });
        });
    </script>
</head>
<body>
    <div style="width:800px;margin:0 auto;">
        <table border="0" cellpadding="0" cellspacing="0" style="width:280px;">
            <tr style="padding-bottom: 5px;">
                <td style="width:80px;">姓名：</td>
                <td style="width:120px;"><input type="text" id="txt_name" style="width:115px;border:1px solid black;" /></td>
                <td style="width:80px;"><input type="button" id="btnSearch" value="查询" /></td>
            </tr>
            <tr>
                <td colspan="3"><input type="button" id="btnLook" value="查看" /></td>
            </tr>
        </table>
        <table id="datagrid" class="easyui-datagrid" data-options="loadMsg:'加载中...',selectOnCheck:false,url:'DataGridHandler.ashx',
               fitColumns:true,singleSelect:true,resizable:true,pagination:true,rownumbers:true,pageSize:30,pageList:[30,50,100]">
            <thead>
                <tr>
                    <th data-options="field:'id',width:30,checkbox:true"></th>
                    <th data-options="field:'code',width:100">编码</th>
                    <th data-options="field:'name',width:100">名称</th>
                    <th data-options="field:'price',width:100">价格</th>
                </tr>
            </thead>
        </table>
    </div>
</body>
</html>

下面是DataGridHandler.ashx的代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web;

namespace WebApplication1
{
    /// <summary>
    /// DataGridHandler 的摘要说明
    /// </summary>
    public class DataGridHandler : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            int pageIndex = Convert.ToInt32(context.Request.Params["page"]);
            int pageSize = Convert.ToInt32(context.Request.Params["rows"]);
            string name = context.Request.Params["name"];
            int total = 0;
            StringBuilder sb = new StringBuilder();
            List<string> list = GetListByPage(pageIndex,pageSize,out total);
            List<string> list2 = new List<string>();
            #region 这里弄了个简单的查询判断
            if (!string.IsNullOrEmpty(name))
                Array.ForEach<string>(list.ToArray(), p => { if (p.Contains(name)) { list2.Add(p); } });
            sb.Append("{\"rows\":[");
            if (list2.Count > 0)
            {
                foreach (string s in list2)
                    sb.Append(s + ",");
                total = list2.Count;
            }
            else
            {
                foreach (string s in list)
                    sb.Append(s + ",");
            } 
            #endregion
            sb.Remove(sb.Length - 1, 1);
            //总的来说，datagrid接收的返回数据样式为：{"rows":[这里可以为数组数据],"total":总的记录数,"success":true/flase,"msg":"信息"}
            sb.Append("],\"total\":"+total.ToString()+"}");
            context.Response.ContentType = "application/json";
            context.Response.Write(sb.ToString());
        }

        /// <summary>
        /// 一个简单的方法，用户获取分页数据
        /// </summary>
        /// <param name="pageIndex"></param>
        /// <param name="pageSize"></param>
        /// <param name="total"></param>
        /// <returns></returns>
        private List<string> GetListByPage(int pageIndex, int pageSize, out int total)
        {
            List<string> list = new List<string>();
            total = 100;
            string str = "";
            if (pageIndex == 4)
                pageSize = 10;
            for (int i = 0; i < pageSize; i++)
            {
                str = "{\"name\":\"小明" + i.ToString() + "\",\"code\":\"KB00" + i.ToString() + "\",\"price\":\"" + ((3.5) * i + 1).ToString() + "\"}";
                list.Add(str);
            }
            return list;
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

 

posted @ 2015-05-10 21:51  尋找一個證明  阅读(152)  评论(0)    收藏  举报