javascript代码实例教程-JQueryEasyUI学习笔记(七)datagrid

发布时间:2019-05-26 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-JQueryEasyUI学习笔记(七)datagrid脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

欢迎大家转载,转载请注明出处!
希望这个笔记对自己和大家有用,但是本人水平有限,如果出错的地方,希望大家指出,多多批评,谢谢!
今天说说这个datagrid框架的基本使用,这个框架一直以来都是大家比较头疼的框架,尤其是Json数据的拼接,后台前台都很重要,使用这个框架,最重要的是仔细:
无需废话,上代码了:


<link href="jquery-easyui-1.3.2/themes/default/easyui.css" rel="stylesheet" tyPE="text/css" />
&nbsp;       <!--easyui最全的样式包也可单独引用你想使用的样式包-->
        <link href="jquery-easyui-1.3.2/themes/icon.css" rel="stylesheet" type="text/css" />
        <!--easyui自带图片样式包,也可自行添加-->
        <script src="jquery-easyui-1.3.2/jquery-1.8.0.min.js" type="text/javascript"></script>
        <!--我使用的是easyui 1.3.2,基于jquery-1.8.0-->
        <script src="jquery-easyui-1.3.2/jquery.easyui.min.js" type="text/javascript"></script>
        <!--easyui的js包-->
        <script src="jquery-easyui-1.3.2/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
        <!--easyui的中文语言包,默认是英文-->
    </head>
<body id="layoutbody" class="easyui-layout">
    <p data-options="region:&#39;north',tITle:'North Title',split:true" style="height: 100px;">
    </p>
    <p data-options="region:'south',title:'South Title',split:true" style="height: 100px;">
    </p>
    <p data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width: 100px;">
    </p>
    <p data-options="region:'west',title:'West',split:true" style="width: 100px;">
    </p>
    <p data-options="region:'center',title:'center title'" href="HTMLPage.htm" style="padding: 5px;
        background: #eee; overflow: hidden;"><!--这里指向了一个htm页-->
    </p>
</body>
</htML>

HTMLPage.htm代码:


<script type="text/javascript" charst="utf-8">
    //因为layout框架指向href时,只取html页面body中间的部分,所以该页面这样写即可
    //有datagrid包含属性较多,所以尽量使用js的方式初始化datagrid框架
    $(function () {
        $("#dg").datagrid({
            url: "GetJson.ashx", //指向一个一般处理程序或者一个控制器,返回数据要求是Json格式,直接赋值Json格式数据也可,我以demo中自带的Json数据为例,就不写后台代码了,但是我会说下后台返回的注意事项
            title: "数据展示表格",
            iconCls: "icon-add",
            fitColumns: false, //设置为true将自动使列适应表格度以止出现水平滚动,false则自动匹配大小
            //toolbar设置表格顶部的工具栏,以数组形式设置
            iDField: 'id', //标识列,一般设为id,可能会区分大小写,大家注意一下
            loadMsg: "正在努力为您加载数据", //加载数据时向用户展示的语句
            pagination: true, //显示最下端的分页工具栏
            rownumbers: true, //显示行数 1,2,3,4...
            pageSize: 10, //读取分页条数,即向后台读取数据时传过去的值
            pageList: [10, 20, 30], //可以调整每页显示的数据,即调整pageSize每次向后台请求数据时的数据
            //由于datagrid的属性过多,我就不每个都介绍了,如有需要,可以看它的API
            sortName: "name", //初始化表格时依据的排序 字段 必须和数据库中的字段名称相同
            sortOrder: "asc", //正序
            columns: [[
                { field: 'code', title: 'Code', width: 100 },
                { field: 'name', title: 'Name', width: 100 ,sortable:true},//sortable:true点击该列的时候可以改变升降序
                { field: 'addr', title: 'addr', width: 100,
                    //这里可以添加这样一个方法,使其显示数据得到改变
//                    formatter: function (value, row, index) {
//                        if (value == "0") {
//                            return "普通角色";
//                        } else {
//                            return "特殊角色";
//                        }
//                    }
                }
            ]]//这里之所以有两个方括号,是因为可以做成水晶报表形式,具体可看demo
        });
    });
</script>
<p id="tt" class="easyui-tabs" style="width: 500px; height: 250px;" fit="true"
    border="false">
    <p title="Tab1" style="padding: 20px;" border="false">
        <table id="dg">
        </table>
    </p>
</p>这是前台请求数据时发送的数据;

 JQueryEasyUI学习笔记(七)datagrid

Json格式数据一定要是双引号的,单引号无法显示数据哦;

数据格式如下:


{                                                     
    "total":239,                                                     
    "rows":[                                                         
        {"code":"001","name":"Name 1","addr":"Address 11","col4":"col4 data"},        
        {"code":"002","name":"Name 2","addr":"Address 13","col4":"col4 data"},        
        {"code":"003","name":"Name 3","addr":"Address 87","col4":"col4 data"},        
        {"code":"004","name":"Name 4","addr":"Address 63","col4":"col4 data"},        
        {"code":"005","name":"Name 5","addr":"Address 45","col4":"col4 data"},        
        {"code":"006","name":"Name 6","addr":"Address 16","col4":"col4 data"},         
        {"code":"007","name":"Name 7","addr":"Address 27","col4":"col4 data"},         
        {"code":"008","name":"Name 8","addr":"Address 81","col4":"col4 data"},         
        {"code":"009","name":"Name 9","addr":"Address 69","col4":"col4 data"},         
        {"code":"010","name":"Name 10","addr":"Address 78","col4":"col4 data"}    
    ]                                                         
}                                                           

这里呢,后台传递数据很重要:


    注意:表格Post或者get回来的请求中
    page:3 代表page为key,然后选择的当前页码为3
    rows:10 代表一页的大小为10
    后台返回的数据的格式为:{total:'',rows:[{},{}]} 
    只要包含了总数tatol字段,rows是具体的行数
    例如:
    Asp.Net MVC 例子:
        public JsonResult GetAllUserInfos()
        {
            int pageSize = 5;
            int pageIndex = 1;
            int.TryParse(this.Request["page"], out pageIndex);
            int.TryParse(this.Request["rows"], out pageSize);

            pageSize = pageSize <= 0 ? 5 : pageSize;
            pageIndex = pageIndex < 1 ? 1 : pageIndex;

            VAR temp = db.UserInfo
                .OrderBy(u=>u.Sort)
                .Skip<UserInfo>((pageIndex-1)*pageSize)
                .Take<UserInfo>(pageSize)
                .ToList<UserInfo>();
            Hashtable ht = new Hashtable();
            ht["total"] = db.UserInfo.Count();
            ht["rows"] = temp;
            return Json(ht);
        }
       
    Asp.Net WebForm 例子:
        public void PRocessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            var strWebName = context.Request["WebName"] ?? string.Empty;
            var  GoodsNo = context.Request["GoodsNo"] ?? string.Empty;
            int categoryId = 0;

            int pageIndex = 1;
            int pageSize = 10;

            int.TryParse(context.Request["rows"], out pageSize);
            int.TryParse(context.Request["page"], out pageIndex);

            decimal priceLeft = 0;
            decimal priceRight = 1000000;
            int goodsstatus = 0;
            decimal.TryParse(context.Request["PriceLeft"], out priceLeft);
            decimal.TryParse(context.Request["PriceRight"], out priceRight);
            int.TryParse(context.Request["CategoryId"], out categoryId);
            int.TryParse(context.Request["GoodsStatus"], out goodsStatus);
            var goodsQueryParamter = new GoodsQueryParamter();
           
          
            goodsQueryParamter.GoodsStatus = (Model.GoodsModel.GoodsStatusEnum)goodsStatus;

            var ds = goodsService.GetGoodsList(goodsQueryParamter);
            string JSON = string.Empty;          

            if (ds != null && ds.Tables.Count > 0)
            {
                System.Text.StringBuilder rowJson = new System.Text.StringBuilder();
                int colLen = ds.Tables[0].Columns.Count;
                DataColumnCollection col = ds.Tables[0].Columns;
                foreach (DataRow row in ds.Tables[0].Rows)
                {
                    System.Text.StringBuilder colJson = new System.Text.StringBuilder();
                    rowJson.Append("{");
                    for (int i = 0; i < colLen; i++)
                    {
                        colJson.Append("/"" + col[i].ColumnName + "/":/"" + row[i].ToString() + "/",");
                    }
                    rowJson.Append(colJson.ToString().TrimEnd(','));
                    rowJson.Append("},");
                }
                json = "{/"total/":" + ds.Tables[0].Rows[0]["sumGoods"] + ",/"rows/":[" + rowJson.ToString().TrimEnd(',') + "]}";
            }
            context.Response.Write(json);
        }

ASP.Net中有一个类也可以序列化Json格式数据;

 

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-JQueryEasyUI学习笔记(七)datagrid全部内容,希望文章能够帮你解决javascript代码实例教程-JQueryEasyUI学习笔记(七)datagrid所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。