Jquery flexigrid使用
使用技术：struts2.1.6+spring+hibernate+jquery+flexigrid+thickbox+mysql
主要的js文件：jquery.js,flexigrid.js,query.js,thickbox.js,util.js
其中：
util.js是扩展flexigrid的功能，如条件查询用到的getQuery属性。
query.js是自定义的flexigrid界面显示和函数触发文件。
Jar包：
使用过程：
Struts2 jar只能用 2.1.l中配置：
<taglib>
        <taglib-uri>struts-tags</taglib-uri>
        <taglib-location>/WEB-INF/lib/struts2-core-2.1.6.jar</taglib-location>
    </taglib>
用struts2-core-2.0.14会报错：
org.apache.jasper.JasperException:  Unable  to  initialize  TldLocationsCache:  null
Jsp页面：
引入jquery、flexigrid插件文件以及test.js，body中编写：
<body>
<table id="grid"></table>
</body>   
在js文件中使用flexigrid创建页面:
$(document).ready( function() {
    $("#grid").flexigrid( {
        // url :'jsp/query/json.json',
url : 'getPaginationAction.action',
        dataType :'json',
        colModel : [ {
            display :'编号',
            name :'id',
            width :60,
            sortable :true,
            align :'center'
        }, {
            display :'姓',
            name :'firstname',
            width :120,
            sortable :true,
            align :'left'
        }, {
            display :'名',
            name :'lastname',
            width :120,
            sortable :true,
            align :'left'
        }, {
            display :'操作',
            name :'opt',
            width :120,
            sortable :true,
            align :'left',
            process :operate
        } ],
        searchitems : [ {
            display :'id',
            name :'id',
            isdefault :true
        }, {
            display :'姓',
            name :'firstname',
            isdefault :true
        }, {
            display :'名',
            name :'lastname',
            isdefault :true
        } ],
        // 右下方工具条按钮
        buttons : [ {
            name :'Add',
            bclass :'add',
            displayname :'增加',
            onpress :test,
            separator :true
        }, {
            name :'Delete',
            bclass :'delete',
            displayname :'删除',
            onpress :test
        }, {
            name :'Modify',
            bclass :'modify',
            displayname :'修改',
            onpress :test
        } ],
        sortname :"id",
        sortorder :"asc",
        striped :true,
        usepager :true,
        resizable: true,
        title :'人员管理',
        useRp :true,
        total :10,
        rp :2,
        pagestat :'显示 {from} 到 {to} 条， 共{total}条记录',
        procmsg :'加载中, 请稍等 ...',
        showTableToggleBtn :true,
        rpOptions : [ 2, 5, 10, 15, 20 ],// 可选择设定的每页结果数
        width :1000,
        height :300,
        getQuery :getQuery
    });
});
条件筛选查询时使用的：
Form id=“search”;
查询按钮的id为dosearch:
<input name="" jquery插件分享type="button" class="btn-search2" value="查询"
                        id="dosearch" />
Flexigrid插件中getQuery属性对应页面上部“更多高级选项”处的“查询”，也是点击树形菜单“角授权”执行过程是相同的。
Manage_list.jsp中页面上部“更多高级选项”处的“查询”id=”dosearch”,
在ace.js插件中
            $('#dosearch').click(function() {g.doSearch();});
而doSearch()中使用getQuery，而getQuery是flexigrid的一个属性：
doSearch: function() {
                //shoru 添加查询扩展参数
                if(!p.getQuery){
                    p.query="";
                }else{
                    p.Query();
                    p.newp = 1;
                    this.populate();
                }
            }
Js/util.js中:
/*分页显示辅助函数*/
function getQuery(){
    return getJSONStr('search');
}
Js/util.js中的getJSONStr()函数是将form中的文本框input的name,value装入数组a
function getJSONStr(formId) {
    var a = [];
    // 文本框
    $("#" + formId + " input[type=text]").each(function(i) {
        a.push({
            name : this.name,
            value : this.value
        });
    });
点击角列表中“授权查询”链接执行的
tb_show(caption,url,imageGroup)在插件thickbox.js中定义，其中url中含有几个参数（KeepThis=true&TB_iframe=true等还有对话框大小设置）需要传入，此函数用来弹出一个
对话框。
Struts配置 文件：初始显示flexgrid表格
<struts>
    <package name="roleduty" extends="default" namespace="/flexjson">
        <action name="manage_servicetype" class="example.flex.DefaultAction" method="getPagination">
            <param name="queryName">roleduty</param>
            <result name="json" type="json">
                <param name="contentType">text/json</param>
                <param name="excludeNullProperties">false</param>
                <param name="root">paginationJson</param>
                <param name="noCache">true</param>
            </result>
            <result name="error" type="json">
                <param name="contentType">text/json</param>
                <param name="excludeNullProperties">false</param>
                <param name="root">jsonResult</param>
                <param name="noCache">true</param>
            </result>
。。。。。。。。。。。。。
</package>
</struts>
对每条记录进行操作
/**
* 链接每条记录的增删改查
*
* @param value
* @param id
* @return
*/
function operate(value, pid) {
    return "<a href='javascript:optView(" + pid + ");'>查询</a> "
            + "<a href='javascript:optEdit(" + pid + ")'>编辑</a> "
            + "<a href='javascript:optDelete(" + pid + ")'>删除</a> ";
}
function optView(id) {
    tb_show(
            "这是查询操作",
            'flexigrid_SelectInitAction.action?model.id='
                    + id
                    + '&KeepThis=true&TB_iframe=true&height=420&width=580&modal=true',
            false);
}
function optEdit(id) {
    tb_show(
            "这是编辑操作",
            'flexigrid_ModInitAction.action?model.id='
                    + id
                    + '&KeepThis=true&TB_iframe=true&height=420&width=580&modal=true',

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。