• FlexGrid 控件的使用 摘自:大道至简


    Jquery FlexGrid 官方地址:http://www.flexigrid.info/

     

    height: 200, //flexigrid插件的高度,单位为px

    ‘auto’, //宽度值,auto表示根据每列的宽度自动计算

    striped: true//是否显示斑纹效果,默认是奇偶交互的形式

    novstripe: false,

    min 30, //列的最小宽度

    minheight: 80, //列的最小高度

    resizable: true//是否可伸缩

    url: false//ajax方式对应的url地址

    method: ‘POST’, // 数据发送方式

    dataType: ‘xml’, // 数据加载的类型

    errormsg: ‘Connection Error’,//错误提升信息

    usepager: false//是否分页

    nowrap: true//是否不换行

    page: 1, //默认当前页

    total: 1, //总页面数

    useRp: true//是否可以动态设置每页显示的结果数

    rp: 15, // 每页默认的结果数

    rpOptions: [10,15,20,25,40],//可选择设定的每页结果数

    title: false,//是否包含标题

    pagestat: ‘Displaying {from} to {to} of {total} items’,//显示当前页和总页面的样式

    procmsg: ‘Processing, please wait …’,//正在处理的提示信息

    query: ”,//搜索查询的条件

    qtype: ”,//搜索查询的类别

    nomsg: ‘No items’,//无结果的提示信息

    minColToggle: 1, //minimum allowed column to be hidden

    showToggleBtn: true//show or hide column toggle popup

    hideOnSubmit: true,//隐藏提交

    autoload: true,//自动加载

    blockOpacity: 0.5,//透明度设置

    onToggleCol: false,//当在行之间转换时

    onChangeSort: false,//当改变排序时

    onSuccess: false,//成功后执行

    onSubmit: false // 调用自定义的计算函数

     

    一个简单的例子

     

    Flexgrid应用

    简单例子

    看了看它接收json数据。它的格式应该为:

    page:"1",total:"2",rows:[{cell:["1","宋江"……]},{cell:[……]}]}

     

    所以返回的应该是这种格式。

    数据由list表提供,如下:

    ·ashx

    string strJson = "{page:\"1\",total:\"2\",rows:[{cell:[\"1\",\"宋江\",\"天魁星\",\"黑三郎\"]},{cell:[\"2\",\"吴用\",\"天机星\",\"智多星\"]}]}";

    context.Response.Write(strJson);

     

    page:当前页

    total:页总数

    ·flexgrid

    引入jquery库与flexgrid库及相关css样式

    $("#flex1").flexigrid

    ({

        url: 'webdata/flex_1.ashx',

        dataType: 'json',

        colModel: [

        { display: '编号', name: 'Unid', 40, align: 'center' },

        { display: '姓名', name: 'CustomerName', 180, align: 'left' },

        { display: '称号', name: 'Memo', 120, align: 'left' },

        { display: '描述', name: 'Other', 130, align: 'left' }

        ],

        sortname: "Unid",

        sortorder: "asc",

        usepager: true,

        striped: true,

        title: '简单的应用',

        useRp: false,

        rp: 10,

         'auto',

        height: 255

    })

    ·页面加一个table,起名:flex1

    <table id="flex1" style="display:none"></table>

     

    其中flexigridjs要放在table下边。

     

    有点问题:

    ·Displaying 部分,用中文会显示乱码,现在没有解决。有解决的请告知一下。

    ·firefox中正常,但在ie中加载有延迟且多数不能显示。同样,有解决的请告知一下。

  • 相关阅读:
    51degress.mobi与wurfl项目的对比
    低版本的51degrees.mobi 1.2.0.5 用UserAgent获取手机硬件型号,并升级最新的WURFL硬件包
    RedGate系列工具,开发必备
    VS中代码显示虚竖线,代码格式标记 Indent Guides
    asp.net下CKFinder IE9以下浏览器中上传图片文件时提示“无效文件名或文件夹名称”的解决方法
    让MySoft.Data也能有Discuz!NT的数据库查询分析工具
    恶意访问网站的策略处理,IP访问限制
    【转载】Asp.Net 全生命周期
    如何在解决方案中新建子网站,Discuz项目子网站技术
    博客园电子期刊2009年8月刊发布啦
  • 原文地址:https://www.cnblogs.com/cwy173/p/1982564.html
Copyright © 2020-2023  润新知