zoukankan      html  css  js  c++  java
  • Jquery 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中加载有延迟且多数不能显示。同样,有解决的请告知一下。

     

    博客园大道至简

    http://www.cnblogs.com/jams742003/

    转载请注明:博客园

  • 相关阅读:
    软件测试重点
    微端 代码project as air 分享
    分析三层架构
    mini2440裸试验—计算器(LCD显示,触摸屏突破)
    ThreadSafeClientConnManager的20个例子
    HttpClient 网络优化
    maven仓库总结,maven私服搭建,批量mvn eclipse:eclipse
    ThreadSafeClientConnManager用来支持多线程的使用http client
    HttpClient 4.3教程(转载)
    一个简单的HTTP服务器(多线程)
  • 原文地址:https://www.cnblogs.com/jams742003/p/1609612.html
Copyright © 2011-2022 走看看