当前位置:  编程技术>jquery

JQuery EasyUI-DataGrid用法示例

    来源: 互联网  发布时间:2014-10-04

    本文导语:  1,显示列表.aspx   代码示例:     显示列表_www.                                 $(function () {             $("#cc").layout();         })                                  ...

1,显示列表.aspx
 

代码示例:




    显示列表_www.
   
   
   
   
   
   
        $(function () {
            $("#cc").layout();
        })
   


   

       

       

       

       

       

       

       

       

   


2,UserManager.htm
 

代码示例:

    $(function () {
        $("#divLayout").layout();
        $("#tblUserList").datagrid({
            url: '/ashx/UserManager.ashx',
            title: '',
            loadMsg: '数据加载中,请稍候...',
            nowrap: false,
            pageSize: 10,
            pageList: [10, 20, 30],
            columns: [[          //注意要两个嵌套的中括号
                { field: 'Id', title: '编号', width: 120, align: 'center', sortable: true },
                { field: 'LoginId', title: '用户ID', width: 120, align: 'left', sortable: true },
                { field: 'Name', title: '用户名称', width: 120, align: 'left', sortable: true },
                { field: 'Address', title: '用户地址', width: 120, align: 'left', sortable: true }
                ]],
            fitColumns: true,
            singleSelect: true,
            pagination: true,
            sortOrder: "asc",
            sortName: "Id",      //初始化时按Id升序排序
            toolbar: [{
                iconCls: 'icon-add',
                text: '添加',
                handler: function () { alert('Add') }
            }, '-', {            //分隔符
                iconCls: 'icon-edit',
                text: '编辑',
                handler: function () { alert('edit') }
            }, '-', {
                iconCls: 'icon-remove',
                text: '删除',
                handler: function () {
                    alert('delete')
                }
            }, '-', {
                iconCls: 'icon-search',
                text: '查询',
                handler: function () {
                    alert('search')
                }
            }]
        });
    });
    //按用户自定义查询条件查询,调用datagird的load方法,传递name查询条件
    function QueryData() {
        $("#tblUserList").datagrid("load", {
            "name":$("#tblQuery").find("input[name='txtName']").val()
        });
    }
    //清除查询条件
    function ClearQuery() {
        $("#tblQuery").find("input").val("");
    }


   

       

           

               
               
                   
                       
                            用户名:
                       
                       
                           
                       
                   
                   
                       
                            注册时间:
                       
                       
                             至
                           
                            查询
                            清空
                       
                   
               
           

           

               
               
               
           

       

   

3,后台一般处理程序UserManager.ashx
 

代码示例:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Script.Serialization;
using System.Data;

namespace MyStartEasyUi.ashx
{
    ///
    /// UserManager 的摘要说明
    ///
    public class UserManager : IHttpHandler
    {
        UsersExtendBll bll = new UsersExtendBll();
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            int pageIndex = GetPageIndex(context);
            int pageSize= GetPageSize(context);
            string mySort = GetSort(context) + " " + GetOrder(context);
            string queryName = GetQueryName(context);
            string whereStr = "";
            if (!string.IsNullOrEmpty(queryName))
            {
                whereStr += " name like '%" + queryName + "%'";
            }
            DataSet dsGet = bll.GetListByPage(whereStr, mySort, (pageIndex - 1) * pageSize + 1, pageIndex * pageSize);
            List lst = bll.DataTableToList(dsGet.Tables[0]);
            int total = bll.GetRecordCount("");
            JavaScriptSerializer js = new JavaScriptSerializer();
            string jsonStrings = js.Serialize(lst);
            string returnJson = "{"total":"+ total.ToString() + ","rows":" + jsonStrings +"}";
   //返回Json格式total表示总数,rows表示返回的数据,这样返回才能分页
            System.Threading.Thread.Sleep(2000);
            context.Response.Write(returnJson);
        }
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
        public Int32 GetPageSize(HttpContext context)
        {
            try
            {
                return Int32.Parse(context.Request["rows"].ToString());
            }
            catch
            {
                return 10;
            }
        }

        public string GetOrder(HttpContext context)
        {
            return context.Request.Form["order"];
        }

        public string GetSort(HttpContext context)
        {
            return context.Request.Form["sort"];
        }

        public string GetQueryName(HttpContext context)
        {
            return context.Request.Form["name"];
        }

        public Int32 GetPageIndex(HttpContext context)
        {
            try
            {
                return Int32.Parse(context.Request["page"].ToString());
            }
            catch
            {
                return 1;
            }
        }
    }
}


    
 
 
 
本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • JS与jquery自定义属性用法
  • jQuery setTimeout()函数的用法介绍
  • jQuery :visible 选择器(冒号)的用法
  • JQuery 判断某个属性是否存在hasAttr用法
  • jquery onpropertychange键盘事件用法举例
  • jQuery setTimeout用法总结(实例)
  • Jquery confirm弹出框的用法
  • jquery的focus函数用法示例
  • Jquery中slideToggle()与toggleClass()用法
  • Jquery 过滤器(first,last,not,even,odd)用法举例
  • jquery 字符串切割函数substring的用法说明
  • jquery判断浏览器类型($.browser用法)
  • jquery css类用法(添加、修改与删除css)
  • jquery中show()、hide()方法的用法
  • 有关jquery一些选择器的用法小结
  • Jquery中ajax方法data参数的用法小结
  • jquery中each的用法分享
  • jquery .attr()与.prop()用法解析
  • jquery插件jTimer jquery定时器的用法举例
  • jquery操作HTML5 的data-*的用法实例分享
  • 通过javascript库JQuery实现页面跳转功能代码
  • jQuery鼠标动画插件 jquery-ahover
  • jQuery概述,代码举例及最新版下载
  • jQuery向导插件 Jquery Wizard Plugin
  • Jquery操作html复选框checkbox:全选,全不选和反选
  • jQuery圆角插件 jQuery Corners
  • struts+spring+hibernate+jquery实现分页功能的几个基本类介绍(异步加载)
  • jQuery相册插件 jQuery.popeye
  • jQuery UI组件 jQuery UI
  • jQuery右键菜单插件 jQuery ContextMenu
  • jQuery分页插件 Pagination jQuery Plugin


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3