QeePHP 开源社区 - 引领 PHP 开发新思想、新模式 » FleaPHP-使用讨论 » Flexigrid在FleaPHP下的使用方法介绍

hegz 发表于 2009-5-14 21:24

Flexigrid在FleaPHP下的使用方法介绍

[i=s] 本帖最后由 hegz 于 2009-8-14 14:45 编辑 [/i]

目前，网络上能够找得到的、基于jQuery框架的、功能比较强大的grid有两个：jqGrid和Flexigrid。虽然这两个表格插件没有Ext-Grid表格功能那么强大，但基本能满足日常应用。jqGrid的用法石头在《[url=http://qeephp.com/bbs/thread-6701-1-1.html]封装了jqGrid为control，大家用用看？[/url]》的贴子里已做了具体介绍，在此我不再赘言。Flexigrid的功能比jqGrid稍弱，但胜在界面美观（仿Ext），易于上手。下面我就Flexigrid在FleaPHP下的使用方法进行具体说明。

[b]一、Flexigrid的新特性：[/b]

[list][*]可调整大小的列[*]可调整大小的高度和宽度[*]可排序的列标题[*]酷主题[*]可将普通表格转换成grid[*]能够连接到一个AJAX数据源（ 支持XML和JSON [新] ）[*]分页[*]显示/隐藏列[*]工具栏（新）[*]搜索（新）[*]可访问的API[/list]
[b]二、相关代码下载：[/b]

[list][*]官方网站：[url=http://www.flexigrid.info]http://www.flexigrid.info[/url]，由于开发者没有自己的主机，主页空间是申请的，因此官方网站经常变换，这个不久之后很有可能变成死链。[*]最新源代码（目前为1.0B3）下载：[url=http://code.google.com/p/flexigrid/]http://code.google.com/p/flexigrid/[/url]，这个就不会经常变换了。[*]jQuery框架代码下载：[url=http://code.google.com/p/jqueryjs/downloads/list]http://code.google.com/p/jqueryjs/downloads/list[/url]。[*]jQuery UI 下载：[url=http://jqueryui.com/themeroller/]http://jqueryui.com/themeroller/[/url]，下载之前，最好先定制好自己喜欢的主题风格再下载。[*]jQuery表单插件下载：[url=http://www.malsup.com/jquery/form/#download]http://www.malsup.com/jquery/form/#download[/url]。[*]jQuery alert插件下载：[url=http://abeautifulsite.net/notebook_files/87/jquery.alerts.zip]http://abeautifulsite.net/notebook_files/87/jquery.alerts.zip[/url]。[/list]
[b]三、代码安装：[/b]

    代码安装比较简单，将代码解压缩到自己项目的相应子目录下即可，我这里是lib/jquery目录。

[b]四、使用方法：[/b]

1、为了不将大家弄迷糊，且便于后续介绍，容我先将用到的数据表单视图代码贴出来。[code]CREATE TABLE IF NOT EXISTS `users` (
  `user_id` int(10) unsigned NOT NULL auto_increment,
  `unit_id` int(10) unsigned NOT NULL default '0',
  `jg_id` int(10) unsigned NOT NULL default '0',
  `username` varchar(8) NOT NULL default '',
  `password` varchar(64) NOT NULL default '',
  `name` varchar(10) NOT NULL default '',
  `class` enum('0','1') NOT NULL default '0',
  `created` datetime NOT NULL default '0000-00-00 00:00:00',
  `updated` datetime NOT NULL default '0000-00-00 00:00:00',
  PRIMARY KEY  (`user_id`)
)[/code]说明：数据库与数据表均为 GB2312 编码格式创建。

2、制作模板文件（Smarty）

由于Smarty要将JavaScript代码里的url进行转换，因此我将xhtml模板代码跟JavaScript合并在一起组成一个模板文件。如果你将JavaScript代码里的URL写实，也可以将JavaScript代码写入文件中，然后通过<script type="text/javascript" src="lib/jquery/your_js_file.js"></script>的方式引用。

xhtml代码：[code]<link rel="stylesheet" type="text/css" href="lib/jquery/ui/css/cupertino/jquery-ui-1.7.1.custom.css">
<link rel="stylesheet" type="text/css" href="lib/jquery/flexigrid/css/flexigrid/flexigrid.css">
<script type="text/javascript" src="lib/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="lib/jquery/jquery-ui-1.7.1.custom.min.js"></script>
<script type="text/javascript" src="lib/jquery/jquery.form.js"></script>
<script type="text/javascript" src="lib/jquery/flexigrid/flexigrid.js"></script>

<!-- //jquery.alerts -->
<link rel="stylesheet" type="text/css" href="lib/jquery/alerts/jquery.alerts.css">
<script type="text/javascript" src="lib/jquery/alerts/jquery.alerts.js"></script>
<style>  
.flexigrid div.fbutton .add  
{  
        background: url(lib/jquery/flexigrid/css/images/row_add.gif) no-repeat center left;  
}
   
.flexigrid div.fbutton .edit  
{  
    background: url(lib/jquery/flexigrid/css/images/row_edit.gif) no-repeat center left;  
}

.flexigrid div.fbutton .delete  
{  
    background: url(lib/jquery/flexigrid/css/images/row_delete.gif) no-repeat center left;  
}
        
.flexigrid div.fbutton .reset  
{  
    background: url(images/user_reset.gif) no-repeat center left;  
}

.flexigrid div.fbutton .excel  
{  
    background: url(images/excel.gif) no-repeat center left;  
}

#dialog_div {
        text-align: left;
        padding-left: 20px;
        margin: 0px;
        padding-top: 10px;
        background-color: #E3F0EA;
}

#dialog_form {
        margin: 0px;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 12px;
        font-style: normal;
}
#dialog_form input.txt {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        font-style: normal;
}
</style>

<!-- // 数据显示表格 -->
<table id="grid"></table>

<!-- // 添加/修改数据对话框 -->
<div id="dialog_div" style='display:none'>
   <form id="dialog_form" name="dialog_form" action="">
     <input name="user_id" type="hidden" id="user_id" value="" />
         <label>用户工号：
     <input name="username" type="text" class="txt" id="username" />
     </label>
     <br /><br />
     <label>真实姓名：
     <input name="name" type="text" class="txt" id="name" />
     </label>
     <br /><br />
         {{if $input.unitView}}
                <label>所属单位：
                {{$input.html_unit}}
                </label>
                <br /><br />
         {{/if}}
         {{if $input.jgView}}
                <label>所属机构：
                {{$input.html_jg}}
                </label>
                <br /><br />
         {{/if}}
     <label>分配角色：
     {{$input.html_auth}}
     </label>
   </form>
</div>[/code]javaScript代码：[code]<script type="text/javascript">
$(document).ready(function(){
         $("#grid").flexigrid({
            url: '{{url controller='User' action='GetJsonData'}}',
                dataType: 'json',
                colModel:
        [
                        {display: '序号', name : 'seq', width : 40, sortable : false, align: 'center'},
            {display: '#ID', name : 'user_id', width : 40, sortable : true, align: 'left', hide: true},
                        {display: '用户工号', name : 'username', width : 70, sortable : true, align: 'left'},
                        {display: '真实姓名', name : 'name', width : 60, sortable : true, align: 'left'},
            {display: '所属单位', name : 'unitname', width : 100, sortable : false, align: 'left'},
            {display: '所属机构', name : 'jgname', width : 100, sortable : false, align: 'left'},
            {display: '分配角色', name : 'jgname', width : 80, sortable : false, align: 'left'},
                        {display: '创建时间', name : 'created', width : 110, sortable : true, align: 'left'},
            {display: '更新时间', name : 'updated', width : 110, sortable : true, align: 'left'}
                ],
                searchitems:
        [
                        {display: '用户工号', name : 'username'},
                        {display: '用户姓名', name : 'name', isdefault: true}
                ],
                sortname: "username",
                sortorder: "asc",
                usepager: true,
                title: '用户工号维护',
                useRp: true,
                rp: 20,
                rpOptions:[10,15,20,25,40],
                showTableToggleBtn: false,
                width: 590,
                height: 400,
        striped:true,
                timeout:1000,
       // onSubmit: addFormData,
        pagestat: '当前显示记录 {from} 到 {to} 条，共 {total} 条记录',
                procmsg: '正在处理，请稍等 ...',
        nomsg:'找不到符合条件的资料！',
        errormsg:'连接错误！',
        buttons:
        [
            {name: '添加', bclass: 'add', onpress: opt},
            {name: '修改', bclass: 'edit', onpress: opt},
            {name: '删除', bclass: 'delete', onpress: opt},
            {separator: true},
                        {name: '重置密码', bclass: 'reset', onpress: opt},
                        {separator: true},
                        {name: '导出EXCEL', bclass: 'excel', onpress: opt},
                        {separator: true}
        ]
        });
   
        /**
         * 添加/修改对话框
         */
        $('#dialog_div').dialog({  
        hide:'',    //点击取消后隐藏,如果设为true，则无法关闭弹窗。  
        autoOpen:false,
                width:360,
        height:250,  
        //modal:true, //蒙层  
        //title:'单位资料添加/修改',  
        overlay: {  
            opacity: 0.5,  
            background: "black"  
        },  
        buttons:{  
            '提交':function(){ addUpdate(); },  
            '取消':function(){ $(this).dialog("close"); },  
            '重置':function(){ $(this).children('form')[0].reset(); }  
        }  
    });

    /**
     * 点击工具条按钮操作
     */
    function opt(com, grid) {
        switch (com) {
            case '添加':
                                $('.ui-dialog-title').text('添加用户工号');
                $('#dialog_div').dialog('open').children('form')[0].reset();
                break;
            case '修改':
                                $('.ui-dialog-title').text('修改用户工号');
                selected_count = $('.trSelected', grid).length;
                if (selected_count == 0) {
                    jAlert('请选择一条记录。', '消息提示');
                                        return false;
                }
                if(selected_count>1){
                    jAlert('抱歉每次只能修改一条记录。', '消息提示');
                    return false;
                }  
                var data = new Array();
                $('.trSelected td', grid).each(function(i){
                                //$('.trSelected td:nth-child(2) div', grid).each(function(i){
                    data=$(this).children('div').text();
                                        //data=$(this).text();
                });
                                //alert(data[3]);
                //form = $('#dialog_div').dialog('open').children('form');
                //form.children('input[name=unit_id]').val(data[1]);
                //form.children('input[name=code]').val(data[2]);
                //form.children('input[name=name]').val(data[3]);
                                $('#user_id')[0].value = data[1];
                                $('#username')[0].value = data[2];
                                $('#name')[0].value = data[3];
                                $.ajax({  
                                        url:'{{url controller='User' action='GetIds'}}',  
                                        data:{user_id:data[1]},  
                                        type:'POST',  
                                        dataType:'json',
                                        success:function(data){
                                                //alert($('#jg_id').options);
                                                var unit_slt = $('#unit_id option');
                                                var jg_slt = $('#jg_id option');
                                                var unit_len = unit_slt.length;
                                                var jg_len = jg_slt.length;
                                                if(unit_len > 0) {
                                                        setSelected(unit_slt, data.unit_id);
                                                }
                                                if(jg_len > 0) {
                                                        setSelected(jg_slt, data.jg_id);
                                                }
                                                
                                                var auth_radio = $('input:radio');
                                                //alert(auth_radio.length);
                                                if (auth_radio.length > 0) {
                                                        setChecked(auth_radio, data.auth);
                                                }
                                        }  
                                });
                $('#dialog_div').dialog('open');  
                break;  
            case '删除':
                                selected_count = $('.trSelected', grid).length;
                if (selected_count == 0) {
                    jAlert('请选择一条记录。', '消息提示');
                                        return false;
                }
                                if(selected_count>1){
                    jAlert('抱歉每次只能删除一条记录。', '消息提示');
                    return false;
                }
                var names = '';  
                $('.trSelected td:nth-child(4) div',grid).each(function(i){  
                    if(i) {
                        names += ',';
                    }
                    names += $(this).text();  
                });  
                var ids = '';  
                $('.trSelected td:nth-child(2) div',grid).each(function(i){  
                    if(i){
                        ids += ',';
                    }
                    ids += $(this).text();  
                })
                                /*
                                if (ids == '') {
                                        alert('请选择删除记录，允许同时选择多条记录。');
                                        return;
                                }*/
                                /*
                                if(confirm("确认删除[" + names + "]的用户工号吗？")){  
                    del(ids);  
                }*/
                                jConfirm("确认删除[<font color='#FF0000'>" + names + "</font>]的用户工号吗？", '删除确认', function(btn){
                                        if (btn) { del(ids); }
                                });
                break;
                        case '重置密码':
                                selected_count = $('.trSelected', grid).length;
                if (selected_count == 0) {
                    jAlert('请选择一条记录。', '消息提示');
                                        return false;
                }
                                if(selected_count>1){
                    jAlert('抱歉每次只能选择一条记录。', '消息提示');
                    return false;
                }
                                var id = $('.trSelected td:nth-child(2) div',grid).text();
                                /*
                var ids = '';  
                $('.trSelected td:nth-child(2) div',grid).each(function(i){  
                    if(i){
                        ids += ',';
                    }
                    ids += $(this).text();  
                })*/
                                reset(id);
                                break;
                        case '导出EXCEL':
                                document.location.href = "{{url controller='User' action='Export'}}";
                                break;
        }  
    }  
   
    /**
     * 添加记录
     */
    function addUpdate(){  
        $('#dialog_form').ajaxSubmit({
                //$('#dialog_form').ajaxform({
                        url:"{{url controller='User' action='Save'}}",
            type:'POST',  
            dataType:'json',
            resetForm:true,
            success:function(){  
                $('#grid').flexReload();
                                $('#dialog_div').dialog('close');
            },
                        error:function(data){
                                jAlert(data.msg, '消息提示');
                        }
        });      
    };
   
    /**
     * 删除记录
     */
    function del(ids){  
        $.ajax({  
            url:"{{url controller='User' action='Del'}}",  
            data:{ids:ids},  
            type:'POST',  
            dataType:'json',
            success:function(){  
                $('#grid').flexReload();
            }  
        });
    };

        /**
         * 重置密码
         */
        function reset(id) {
                $.ajax({  
            url:"{{url controller='User' action='Reset'}}",  
            data:{user_id:id},  
            type:'POST',  
            dataType:'json',
            success:function(data){  
                //$('#grid').flexReload();
                                jAlert("成功重置[" + data.name + "]工号的密码为[123456]。", '消息提示');
                //return;
            },
                        error:function(data){
                                jAlert("重置[" + data.name + "]工号的密码失败。", '消息提示')
                        }
        });
        };
        
        // 根据所属单位数据设置已选项
        function setSelected(slt, value) {
                for(var i=0; i<slt.length; i++) {
                        if(slt.value == value) {
                                slt.selected = true;
                        } else {
                                slt.selected = false;
                        }
                }
        };
        
        // 根据所属机构数据设置已选项
        function setChecked(slt, value) {
                for(var i=0; i<slt.length; i++) {
                        if(slt.value == value) {
                                slt.checked = true;
                        } else {
                                slt.checked = false;
                        }
                }
        };
});
</script>[/code]Flexigrid参数配置说明：[code]// 设置远端服务器URL地址
url: '{{url controller='User' action='GetJsonData'}}',

// 将发送和接收的数据类型设置为JSON格式
dataType: 'json',

// 设置表格表头及数据显示方式
colModel:
        [
                        {display: '序号', name : 'seq', width : 40, sortable : false, align: 'center'},
            {display: '#ID', name : 'user_id', width : 40, sortable : true, align: 'left', hide: true},
                        {display: '用户工号', name : 'username', width : 70, sortable : true, align: 'left'},
                        {display: '真实姓名', name : 'name', width : 60, sortable : true, align: 'left'},
            {display: '所属单位', name : 'unitname', width : 100, sortable : false, align: 'left'},
            {display: '所属机构', name : 'jgname', width : 100, sortable : false, align: 'left'},
            {display: '分配角色', name : 'jgname', width : 80, sortable : false, align: 'left'},
                        {display: '创建时间', name : 'created', width : 110, sortable : true, align: 'left'},
            {display: '更新时间', name : 'updated', width : 110, sortable : true, align: 'left'}
                ],

// 设置快速搜索参数
searchitems:
        [
                        {display: '用户工号', name : 'username'},
                        {display: '用户姓名', name : 'name', isdefault: true}
                ],

// 设置表格标题
title: '用户工号维护',

//分页相关参数
usepager: true,        
useRp: true,
rp: 20,
rpOptions:[10,15,20,25,40],

// 不显示关闭表格窗口按钮
showTableToggleBtn: false,


// 设置表格宽度及高度
width: 590,
height: 400,

// 设置表格数据隔行变色
striped:true,

// 设置超时，单位毫秒
timeout:1000,

// 设置表格中文信息显示
pagestat: '当前显示记录 {from} 到 {to} 条，共 {total} 条记录',
procmsg: '正在处理，请稍等 ...',
nomsg:'找不到符合条件的资料！',
errormsg:'连接数据库失败！',

// 设置表格工具按钮
buttons:
        [
            {name: '添加', bclass: 'add', onpress: opt},
            {name: '修改', bclass: 'edit', onpress: opt},
            {name: '删除', bclass: 'delete', onpress: opt},
            {separator: true},
                        {name: '重置密码', bclass: 'reset', onpress: opt},
                        {separator: true},
                        {name: '导出EXCEL', bclass: 'excel', onpress: opt},
                        {separator: true}
        ][/code]四、后台PHP代码（节选）：

获取分页数据代码：[code]
        /**
         * 返回JSON分页数据到前台
         *
         */
        function actionGetJsonData()
        {
                $user = $this->user;
                $page = ($_POST['page']) ? $_POST['page'] : 1;
                $limit = ($_POST['rp'])?$_POST['rp'] : 20;
                $sortname = $_POST['sortname'];
                $sortorder = $_POST['sortorder'];

                if (!$sortname) $sortname = 'username';
                if (!$sortorder) $sortorder = 'asc';

                $sort = "$sortname $sortorder";

                if (!$page) $page = 1;
                if (!$limit) $limit = 15;

                $offset = ($page-1) * $limit;

                $query = $_POST['query'];
                $qtype = $_POST['qtype'];
                if ($qtype == 'name') {
                        $query = mb_convert_encoding($query, 'GB2312', 'utf-8');
                }

                if ($user['RBAC_ROLES'][0] == 'SYSTEM_ADMIN'){
                        $conditions = array(
                                array('class', '1', '='),
                        );
                } else {
                        $conditions = array(
                                array('unit_id', $user['UNITID'], '=', 'AND'),
                                array('class', '0', '=')
                        );
                }
               
                if ($query) {
                        $conditions = array(
                                array($qtype, '%' . $query . '%', 'LIKE')
                        );
                }
               
                $this->_tblUser->enableLinks();
                $rows = $this->_tblUser->findAll($conditions, $sort, array($limit, $offset));
                $rs = $this->_tblUser->findAll($conditions);
                $total = count($rs);
                $json = "";
                $json .= "{\n";
                $json .= "page: $page,\n";
                $json .= "total: $total,\n";
                $json .= "rows: [";
                $rc = false;
                $i = 1;
                foreach ($rows as $row) {
                        if ($rc) $json .= ",";
                        $json .= "\n{";
                        $json .= "user_id:'".$row['user_id']."',";
                        $json .= "cell:['".$i."'";
                        $json .= ",'".$row['user_id']."'";
                        $json .= ",'".$row['username']."'";
                        $json .= ",'".addslashes($row['name'])."'";
                        $json .= ",'".addslashes($row['unit']['name'])."'";
                        $json .= ",'".addslashes($row['jgwh']['name'])."'";
                        $json .= ",'".$row['roles'][0]['rolename_cn']."'";
                        $json .= ",'".$row['created']."'";
                        $json .= ",'".$row['updated']."']";
                        $json .= "}";
                        $rc = true;
                        $i++;
                }
                $json .= "]\n";
                $json .= "}";
                echo $json;
                exit;
        }
[/code]注意上面生成 JSON 格式数据的 PHP 代码，必须严格按照这样的格式返回数据，否则 Flexigrid 将无法处理返回的数据。再有，请注意列模型 [b]colModel [/b]里的 [b]name[/b] 参数，与 user 数据表的字段并不一一对应，但必须与返回的 JSON 数据保持一致。

保存数据代码：[code]        /**
         * 保存数据
         *
         */
        function actionSave()
        {
                $user = $this->user;
                $data = $_POST;
                $data['name'] = mb_convert_encoding(trim($data['name']), 'GB2312', 'utf-8');

                if ($data['username'] == ''){
                        //js_alert("请输入操作帐号。",'',$this->_url());
                        echo "{succees:false,msg:'用户工号不能为空！'}";
                        return;
                }
                if (strlen($data['username']) != 8){
                        //js_alert("您输入的工号不等于8位，请检查后重新增加。",'',$this->_url());
                        echo "{succees:false,msg:'用户工号不等于8位！'}";
                        return;
                }
                if ($data['name'] == ''){
                        //js_alert("请输入用户名称。",'',$this->_url());
                        echo "{succees:false,msg:'用户姓名不能为空！'}";
                        return;
                }

                if ($data['user_id']=='') {
                        $data['password'] = '123456';
                        //$sort = '`user_id` DESC';
                }
                if ($data['user_id'] == '' && $this->_tblUser->existsUsername(trim($data['username']))) {
                        //js_alert("该工号已存在，请重新输入。",'',$this->_url());
                        echo "{succees:false,msg:'该用户工号已存在！'}";
                        return false;
                }

                if (isset($data['auth']) && ($data['auth'] == 1 || $data['auth'] == 2)) {
                        $data['class'] = '1';
                }

                if (isset($data['auth'])) {
                        $data['roles'][0] = $data['auth']; // 为更新 users_roles 中间表准备数据
                }

                if ($user['RBAC_ROLES'][0] != 'SYSTEM_ADMIN') {
                        $data['unit_id'] = $user['UNITID'];
                }

                $this->_tblUser->enableLink('roles');
                __TRY();
                $this->_tblUser->save($data);
                $ex = __CATCH();
                if (__IS_EXCEPTION($ex)) {
                        echo "{succees:false,msg:'保存数据失败！'}";
                } else {
                        echo "{succees:true,msg:'保存数据成功！'}";
                }
                exit;
        }[/code]注意其中的语句：[code]$data['name'] = mb_convert_encoding(trim($data['name']), 'GB2312', 'utf-8');[/code]由于ajax提交的中文数据为 utf-8 编码格式的数据，因此保存到数据表时，须用多字节字符串处理函数 mb_convert_encoding 转换成 GB2312 编码格式的数据。

删除记录代码：[code]
/**
         * 删除记录
         *
         */
        function actionDel()
        {
                $ids = $_POST['ids'];
                if ($this->user['RBAC_ROLES'][0] == 'SYSTEM_ADMIN') {
                        __TRY();
                        $this->_tblUser->removeByPkv((int)$ids);
                        $ex = __CATCH();
                } else {
                        $conditions = array(
                                array('unit_id', $this->user['UNITID'], '=', 'AND'),
                                array('user_id', $ids, '='),
                        );
                        $this->_tblUser->enableLink('roles');
                        __TRY();
                        $this->_tblUser->removeByConditions($conditions);
                        $ex = __CATCH();
                }
                if (__IS_EXCEPTION($ex)) {
                        echo "{succees:false,msg:'删除数据失败！'}";
                } else {
                        echo "{succees:true,msg:'删除数据成功！'}";
                }
                exit;
        }[/code]在此，不使用json_encoding生成返回的分页json格式数据，因为在 GB2312 环境下使用时，返回的中文数据会乱码。估计json_encoding生成了 json 数据对象，而 json 数据对象在 JavaScript 中是以 utf-8 编码来保存数据，所以导致在 GB2312 环境下会产生中文乱码。而上面的 PHP 代码直接返回的数据是 json 格式的字符串，所以在浏览器显示中文数据时不会产生乱码。

[b]五、存在不足：[/b]

    Flexigrid存在不足的地方主要有以下几点：

[list=1][*]定制搜索功能太弱，但这也是开发者将搜索功能定义为“Quick Search”的原因。[*]文档严重缺乏，难道外国同行跟我们一样，在利用框架开发程序时，也需要研究框架的源代码？[*]版本更新维护严重不足，目前最新版本也是2008-7-14推出来的，现在快一年了还没见更新。[/list]
[b]六、结束语[/b]
    石头曾经叫我将Flexigrid封装成QeePHP插件，但由于我对 QeePHP的使用还不太熟悉，真是有心无力，无法完成此艰巨的任务了，这一工作留待其他大虾去完成吧。不过，后来想深一层，将Flexigrid封装成 QeePHP 或 FleaPHP 插件，其通用性如何？倒值得好好分析分析，研究研究。Flexigrid 的使用就介绍到这里吧，不好的地方，请各位水之。


demo下载：
[attach]1869[/attach]

注意：sql 文件在 dbdata 下，编码环境：GB2312
系统登录：1111/666666

hegz 发表于 2009-5-14 22:08

明天上班将效果图帖上来。

dualface 发表于 2009-5-15 00:21

:loveliness:

hegz 发表于 2009-5-15 08:42

[i=s] 本帖最后由 hegz 于 2009-8-12 18:14 编辑 [/i]

[b] [url=http://qeephp.com/bbs/redirect.php?goto=findpost&pid=43213&ptid=7309]1#[/url] [i]hegz[/i] [/b]

运行效果图1：
[attach]1641[/attach]

运行效果图2:
[attach]1642[/attach]

运行效果图3：
[attach]1643[/attach]

运行效果图4：
[attach]1644[/attach]

运行效果图5：
[attach]1645[/attach][color=Red]注意：查询数据时，输入数据后必须直接按回车。[/color]

hegz 发表于 2009-5-15 09:38

[i=s] 本帖最后由 hegz 于 2009-5-15 09:39 编辑 [/i]

[b] [url=http://qeephp.com/bbs/redirect.php?goto=findpost&pid=43280&ptid=7309]4#[/url] [i]hegz[/i] [/b]

完整的参数及说明如下（当前值为默认值）：

height: 200, //flexigrid插件的高度，单位为px
width: ‘auto’, //宽度值，auto表示根据每列的宽度自动计算
striped: true, //是否显示斑纹效果，默认是奇偶交互的形式
novstripe: false,
minwidth: 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 // 调用自定义的计算函数

hegz 发表于 2009-6-1 20:05

看了上文，真是感概万千。难道我真的老了吗？难道真的如发哥所说的“如今的江湖已经不是我们的江湖”了吗？

jian0487 发表于 2009-8-11 17:22

您好 能不能把你的源代码打包一份我 看看啊 谢谢啦  我的email： [email]jian0487@163.com[/email]

hegz 发表于 2009-8-11 17:27

你是说把整个项目的源代码打包发给你吗？这。。。，这。。。，不太好吧？

hegz 发表于 2009-8-11 17:35

过几天等我整一个demo放上来，让大家下载吧。

firzen 发表于 2009-8-11 20:22

强烈建议hegz增强flea，哈哈

hegz 发表于 2009-8-12 18:02

我成了FleaPHP的守望者。

hegz 发表于 2009-8-14 10:46

[quote]您好 能不能把你的源代码打包一份我 看看啊 谢谢啦  我的email： [email=jian0487@163.com]jian0487@163.com[/email]
[size=2][color=#999999]jian0487 发表于 2009-8-11 17:22[/color] [url=http://qeephp.com/bbs/redirect.php?goto=findpost&pid=49839&ptid=7309][img]http://qeephp.com/bbs/images/common/back.gif[/img][/url][/size][/quote]
demo代码已上传，请到顶楼下载。

hegz 发表于 2009-8-14 14:46

修正了几个小Bug后，下午重新上传demo。

jian0487 发表于 2009-8-18 08:32

恩  知道了  真是谢谢啦 :lito01

lass 发表于 2009-10-5 17:58

太好了[b] [url=http://qeephp.com/bbs/redirect.php?goto=findpost&pid=50016&ptid=7309]12#[/url] [i]hegz[/i] [/b]

查看完整版本: Flexigrid在FleaPHP下的使用方法介绍