`
yanjie_1206
  • 浏览: 8031 次
  • 性别: Icon_minigender_1
  • 来自: 南京
文章分类
社区版块
存档分类
最新评论

flexigrid使用操作

 
阅读更多

1、flexigrid参数说明:
    height: 200, //flexigrid插件的高度,单位为px
    width: 'auto', //宽度值,auto表示根据每列的宽度自动计算,在IE6下建议设置具体值否则会有问题
    striped: true, //是否显示斑纹效果,默认是奇偶交互的形式
    novstripe: false,//没用过这个属性
    minwidth: 30, //列的最小宽度
    minheight: 80, //列的最小高度
    resizable: false, //resizable table是否可伸缩
    url: false, //ajax url,ajax方式对应的url地址
    method: 'POST', // data sending method,数据发送方式
    dataType: 'json', // type of data loaded,数据加载的类型,xml,json
    errormsg: '发生错误', //错误提升信息
    usepager: false, //是否分页
    nowrap: true, //是否不换行
    page: 1, //current page,默认当前页
    total: 1, //total pages,总页面数
    useRp: true, //use the results per page select box,是否可以动态设置每页显示的结果数
    rp: 25, // results per page,每页默认的结果数
    rpOptions: [10, 15, 20, 25, 40, 100], //可选择设定的每页结果数
    title: false, //是否包含标题
    pagestat: '显示记录从{from}到{to},总数 {total} 条', //显示当前页和总页面的样式
    procmsg: '正在处理数据,请稍候 ...', //正在处理的提示信息
    query: '', //搜索查询的条件
    qtype: '', //搜索查询的类别
    qop: "Eq", //搜索的操作符
    nomsg: '没有符合条件的记录存在', //无结果的提示信息
    minColToggle: 1, //允许显示的最小列数
    showToggleBtn: true, //是否允许显示隐藏列,该属性有bug设置成false点击头脚本报错。
    hideOnSubmit: true, //是否在回调时显示遮盖
    showTableToggleBtn: false, //是否显示【显示隐藏Grid】的按钮
    autoload: true, //自动加载,即第一次发起ajax请求
    blockOpacity: 0.5, //透明度设置
    onToggleCol: false, //当在行之间转换时,可在此方法中重写默认实现,基本无用
    onChangeSort: false, //当改变排序时,可在此方法中重写默认实现,自行实现客户端排序
    onSuccess: false, //成功后执行
    onSubmit: false, // 调用自定义的计算函数,基本没用     
    //Style
    gridClass: "bbit-grid"//样式         
}, p);
----------------------------------------------------------------------------------------------
2、支持ajax跨域:
    url中加callback=?
    后台获得callback函数的名字
    返回json数据格式为:print(callbackName+"("+jsonString+")");
----------------------------------------------------------------------------------------------
3、Flexigrid(HUGO.CM修改版v1.1)使用说明:
    1、加载flexigrid。p:选项参数集合
        $(“”).flexigrid(p);
    2、重新加载数据。
        $(“”).flexReload(p);
    3、更改flexigrid参数。P:选项参数集合
        $(“”).flexOptions (p);
    4、隐藏/显示列。cid:列索引,visible:bool
        $(“”).flexToggleCol (cid, visible);
    5、绑定数据。Data:数据源
        $(“”).flexAddData (data);
    6、no select plugin by me 。不知道做什么用的
        $(“”).noSelect (p);
    7、重新指定宽度和高度。
        $(“”).flexResize(w,h);
    8、翻页。type:first、prev、next、last、input
        $(“”).changePage(type);
----------------------------------------------------------------------------------------------
4、Flexigrid——colModel:
    属性名    类型    描述
    display    string    显示的列名
    name    string    绑定的列名
    sortable bool    是否可以排序
    align    string    对其方式
    width    int    列的宽度
    hide    bool    是否隐藏该列
    pk    bool    是否为主键标识、如果是则隐藏该列,值存入隐藏域中
    process    function   
    customValue function    自定义显示值。(如性别:数据库为Bit类型,通过customValue方法返回“男/女”)参数:value,i
----------------------------------------------------------------------------------------------
5、Flexigrid——事件
    事件名        参数                    描述            返回值
    onDragCol    dcoln,dcolt                拖动列后触发         无
    onToggleCol    cid,visible                隐藏/显示列后触发    无
    onChangeSort    sortname,sortorder            自定义排序事件        无
    onChangePage    newp                    自定义翻页事件        无
    onSuccess    无                    数据获取成功时触发    无
    onError        XMLHttpRequest,textStatus,errorThrown   出现错误时触发        无
    onSubmit    无                    在获取数据前时触发    bool
    onRowSelect    this                    行选中事件        无
----------------------------------------------------------------------------------------------
6、Flexigrid——buttons
    属性名        类型        描述
    name        string        按钮名称
    bgclass        string        样式
    onpress        function    点击触发的方法
    separator    bool        分割线
----------------------------------------------------------------------------------------------
7、Flexigrid——searchitems
    属性名        类型        描述
    display        string        搜索类型下拉列表框:显示的列名
    name        string        搜索类型下拉列表框:绑定的列名
    isdefault    bool        是否为默认搜索类型
    //注:如果searchitems:true,则自动根据所有字段生成下拉列表框

 

分享到:
评论

相关推荐

    FlexiGrid配置与使用

    在项目中使用FlexiGrid,你需要在Web项目中创建一个新目录,例如`WebRoot/`,并将`flexigrid`文件夹中的所有内容复制到这里。接着,在JSP页面中,你需要设置一个HTML表格作为FlexiGrid的容器,例如`...

    flexiGrid列表ajax操作

    这篇博文《flexiGrid列表ajax操作》可能详细讲解了如何利用FlexiGrid与服务器端通过AJAX进行交互,实现动态加载、更新和编辑列表数据。 在Web开发中,AJAX(Asynchronous JavaScript and XML)是一种创建动态网页的...

    flexigrid使用实例

    Flexigrid是一款强大的JavaScript数据网格插件,常用于在网页中展示和操作表格数据。它提供了丰富的功能,如分页、排序、搜索以及自定义列宽等,使得数据的展示和管理更为便捷。本实例主要关注如何在PHP环境中集成和...

    FlexiGrid插件使用例子

    在Java环境中,FlexiGrid通常与Servlets结合使用,以服务器端的数据作为数据源,通过JSON格式进行数据传输。 首先,让我们深入了解一下FlexiGrid的核心特性: 1. **数据绑定**:FlexiGrid可以绑定到不同的数据源,...

    jQuery插件flexigrid使用总结--进一步优化

    《jQuery插件flexigrid使用总结与进一步优化》 在Web开发中,数据展示和交互是不可或缺的一部分。jQuery插件flexigrid是一款轻量级、功能强大的表格插件,能够帮助开发者快速构建具有分页、排序、搜索等功能的动态...

    Flexigrid使用实例

    本篇文章将深入探讨Flexigrid的使用方法,通过实例帮助读者更好地理解和应用。 1. **安装与引入** 在开始使用Flexigrid之前,需要将其库文件下载到项目中。在`Flexigrid`压缩包内,通常会包含`flexigrid.js`(核心...

    FlexiGrid使用手册

    FlexiGrid是一个基于jQuery的网格组件,用于展示和操作数据,具有丰富的特性和自定义功能。这个使用手册将详细介绍如何使用FlexiGrid以及其主要属性。 一、FlexiGrid概述 FlexiGrid是一个轻量级的JavaScript插件,...

    FlexiGrid使用教程

    ### FlexiGrid 使用教程 #### 一、FlexiGrid简介 FlexiGrid 是一款非常实用且功能强大的 jQuery 插件,用于实现数据表格的展示、排序、搜索、分页等功能。它提供了丰富的配置选项和自定义功能,适用于各种网页应用...

    flexigrid.js flexigrid.js flexigrid.js

    2. **数据源**:Flexigrid.js可以与各种数据源配合使用,包括JSON、XML、CSV等,只需提供正确的数据格式和URL,就能动态加载和展示数据。 3. **功能丰富**:它内置了多项功能,如排序(asc/desc)、分页、搜索、...

    Jquery flexigrid使用

    ### Jquery Flexigrid 使用详解 #### 技术栈概览 本文档旨在介绍如何结合Struts2.1.6、Spring、Hibernate、jQuery、Flexigrid、Thickbox及MySQL来实现一个功能完整的Web应用。该应用的核心是通过Flexigrid在前端...

    flexigrid相关

    Flexigrid是一款基于jQuery的轻量级数据网格插件,用于在网页中展示和操作表格数据。它提供了丰富的功能,包括排序、分页、搜索、列宽调整等,使得数据管理更加直观和高效。在“flexigrid.js”和“flexigrid.css”这...

    jquery插件之flexigrid篇

    jQuery简化了DOM操作、事件处理和动画效果,使得flexigrid的使用更加简单便捷。通过jQuery,开发者可以快速实现诸如行选择、分页、排序和搜索等功能。 在flexigrid中,一些关键功能包括: 1. **数据分页**:...

    JQuery_插件FlexiGrid_之完全配置与使用

    ### JQuery插件FlexiGrid之完全配置与使用 #### 一、引言 FlexiGrid是一款基于jQuery的轻量级表格插件,它为开发者提供了简单易用的方式来展示和操作数据表格。FlexiGrid支持多种功能,如排序、分页、筛选等,非常...

    jquery+flexigrid使用方法.pdf

    jQuery与Flexigrid的结合使用在Web开发中常用于创建动态、交互性强的数据表格。Flexigrid是一款基于jQuery的插件,它提供了一种轻量级的方式来展示和操作网格数据,具有分页、排序、搜索等功能,特别适用于数据密集...

    Flexigrid与struts2的整合使用说明

    这两者的整合使得开发者可以在Struts2应用中利用Flexigrid的优秀特性来展示和操作数据。 Flexigrid的使用说明: 1. 引入库:首先,你需要在HTML页面中引入Flexigrid的CSS和JavaScript文件。这通常包括`flexigrid....

    flexigrid表格功能丰富

    在Flexigrid中,可以使用DWR来处理表格的CRUD操作,如获取数据、更新数据或删除行。通过DWR,前端的JavaScript代码可以实时同步后台数据库的状态。 5. **支持以对象或者数组方式获取选中行数据** Flexigrid提供了...

    jsp中flexigrid插件在ie下样式问题

    然而,在使用FlexiGrid的过程中,尤其是在支持Internet Explorer(IE)浏览器时,可能会遇到各种兼容性问题。本文将针对“jsp中flexigrid插件在ie下样式问题”这一特定场景进行深入分析,并提供相应的解决方案。 ##...

    jquery插件FlexiGrid的使用(已更新)

    FlexiGrid是一款基于jQuery的表格插件,它提供了丰富的功能,包括数据分页、排序、过滤、编辑等,使得在Web应用中展示和操作大量数据变得更加便捷。在本篇文章中,我们将深入探讨FlexiGrid的使用方法,以及如何将其...

    jquery flexigrid

    总的来说,jQuery Flexigrid是一款功能强大且易于使用的表格组件,它简化了网页数据展示的开发过程,提供了丰富的交互体验。无论是简单的数据展示,还是复杂的业务逻辑处理,Flexigrid都能游刃有余地应对,是Web开发...

Global site tag (gtag.js) - Google Analytics