代码改变世界

.net下的jqgrid的使用

2011-07-28 11:08  飞魚  阅读(2369)  评论(7编辑  收藏  举报

jqgrid功能貌似还不错,但大多都是php环境下的,趁着无聊折腾了下,这里折腾的是返回json数据的形式..

先上截图,有图有真相..

新建html页面如图所示

引入相关资源文件,<script src="i18n/grid.locale-cn.js" type="text/javascript"></script>为本地化文件,各个参数详细信息就不多说了,试试就知道了..

hd.aspx处理文件代码,这里没有进行值判断和访问数据库,只是模拟了下,所以没有实现排序功能,可以翻页,具体想实现什么功能可以修改后台程序,它会把相应的参数传给你..

namespace WebDevelop.js.lib.jq.grid

{

    public partial class hd : System.Web.UI.Page

    {

        protected void Page_Load(object sender, EventArgs e)

        {

            int page = Convert.ToInt32(Request.QueryString["page"]);//设置要显示第几页的内容

            int rows = Convert.ToInt32(Request.QueryString["rows"]);//设置要显示的行数

            //string sidx = Request.QueryString["sidx"];//要排序的字段名

            //string sord = Request.QueryString["sord"];//按升序排列还是降序

            Response.Write(jsonstring(page, rows, 30));

            Response.End();

        }





        private string jsonstring(int page, int rows, double records)

        {

            double a = records / rows;

            int total = Convert.ToInt32(Math.Ceiling(a));//总页数

            StringBuilder sb = new StringBuilder("{");

            sb.AppendFormat(@"""page"":""{0}"",""total"":{1},""records"":""{2}"",""rows"":{3}", page, total, records, createrows(rows * (page - 1), rows * page));

            sb.Append("}");

            return sb.ToString();

        }



        private string createrows(int pageS, int pageE)

        {

            StringBuilder s = new StringBuilder("[");

            for (; pageS < pageE; pageS++)

            {

                s.Append("{");

                s.AppendFormat(@"""id"":""{0}"",""cell"":[""{1}"",""{2}"",""{3}"",""{4}"",""{5}"",""{6}"",""{7}""]", pageS + 1, pageS + 1, DateTime.Now.ToString(), "ClientXXX", "10000.0", "0.000", "1000", null);

                if (pageS != pageE - 1)

                    s.Append("},");

            }



            s.Append("}]");

            return s.ToString();

        }



    }

}

关于客户端的接口调用可以看下这篇文章http://www.cnblogs.com/hurenwang/archive/2011/04/06/2006882.html

jqgridDemo的完整示例可以看看官方演示说明,环境是基于php的http://www.trirand.com/blog/jqgrid/jqgrid.html

最后附上完整demo jq.grid