`
hegz
  • 浏览: 441603 次
  • 性别: Icon_minigender_1
  • 来自: 茂名
社区版块
存档分类
最新评论

数据表格Flexigrid在FleaPHP下的使用方法介绍

jQueryjsonExcelJavaScriptCSS 
阅读更多

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

一、Flexigrid的新特性：

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


二、相关代码 下载 ：


三、代码安装：

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

四、使用方法：

1、为了不将大家弄迷糊，且便于后续介绍，容我先将用到的数据表单视图 代码贴出来。


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`)
)

说 明：数据库 与数据表均为 GB2312 编码 格式创建。

2、制作模板 文件 （Smarty）

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

xhtml代码：

<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>
 

javaScript代码：

<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>
 

Flexigrid参数 配置说明：


// 设置远端服务器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,

// 设置表格中文信息显示
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}
        ]

四、后台 PHP 代码（节选）：

获取分页数据代码：


        /**
         * 返回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;
        }
 

注 意上面生成 JSON 格式数据的 PHP 代码，必须严格按照这样的格式返回数据，否则 Flexigrid 将无法处理返回的数据。再有，请注意列模型 colModel 里 的 name 参数，与 user 数据表的字段 并不一一对应，但必须与返回的 JSON 数据保持一致。

保存数据代码：


        /**
         * 保存数据
         *
         */
        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;
        }
 

注 意其中的语句 ：

$data['name'] = mb_convert_encoding(trim($data['name']), 'GB2312', 'utf-8');
 

由于 ajax提交的中文数据为 utf-8 编码格式的数据，因此保存到数据表时，须用多字节字符串处理函数 mb_convert_encoding 转换成 GB2312 编码格式的数据。

删除记录代码：

/**
         * 删除记录
         *
         */
        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;
        }
 

在此，不使用json_encoding生成返回的分页json 格式数据，因为在 GB2312 环境下使用时，返回的中文数据会乱码 。估计json_encoding生成了 json 数据对象 ，而 json 数据对象在 JavaScript 中是以 utf-8 编码来保存数据，所以导致在 GB2312 环境下会产生中文乱码。而上面的 PHP 代码直接返回的数据是 json 格式的字符串，所以在浏览器显示中文数据时不会产生乱码。

五、存在不足：

    Flexigrid存在不足的地方主要有两点：

  • 定制搜索功能太弱，但这也是开发者将搜索功能定义 为“Quick Search”的原因。
  • 版 本更新维护严重不足，目前最新版本也是2008-7-14推出来的，现在快一年了还没见更新。


六、结束语
    石头曾经叫我将Flexigrid封装成QeePHP 插件，但由于我对 Qee PHP的使用还不太熟悉，真是有心无力，无法完成此艰巨的任务了，这一工作留待其他大虾去完成吧。不 过，后来想深一层，将Flexigrid封装成 QeePHP 或 Flea PHP 插件，其通用性如何？倒值得好好分析分析，研究研究。Flexigrid 的使用就介绍到这里吧，不好的地方，请各位水之。

本人论坛贴：http://qeephp.com/bbs/thread-7309-1-1.html

运 行效果图1： 

运行效果图2:

 
运行效果图3：




运行效果图4：




运行效果图5：

 

  • 大小: 78.4 KB
  • 大小: 16.3 KB
  • 大小: 14.6 KB
  • 大小: 8.8 KB
  • 大小: 8.1 KB
1
顶
0
踩
分享到：
| FLEA/Helper/Array.php中array_to_tree的 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    FlexiGrid配置与使用

    FlexiGrid是一款基于JQuery的表格插件，用于在网页中展示数据，具有分页、排序、筛选等功能，常用于后台管理系统中数据的展示。它提供了丰富的配置选项和灵活的扩展性，使得开发者可以根据需求定制表格的行为和样式...

    flexigrid表格功能丰富

    在“flexigrid表格功能丰富”这一主题下，我们可以深入探讨Flexigrid的核心特性以及如何实现描述中的各项功能。 1. **支持两个表格行移动** Flexigrid允许用户通过拖放操作轻松调整表格行的顺序。这种功能对于展示...

    FlexiGrid插件使用例子

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

    Jquery仿Ext表格flexigrid

    Flexigrid是一款基于jQuery的开源表格插件，它在功能和用户体验上模仿了Ext JS的Grid组件。这款插件以其轻量级、高效和丰富的特性，深受Web开发者喜爱，尤其适用于需要展示大量数据并进行排序、分页等操作的场景。 ...

    Flexigrid-master表格插件

    Flexigrid是一款基于jQuery的强大的表格插件，它在Web应用中被广泛使用，用于创建交互式、可自定义的网格视图。Flexigrid以其灵活性和易用性著称，能够满足各种复杂的表格需求。以下是对Flexigrid主要功能和特性的...

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

    假设在一个基于JSP的项目中，使用FlexiGrid插件后发现IE8下表格样式错乱。 **步骤1：**检查FlexiGrid官方文档中关于IE兼容性的说明，并根据需要调整CSS代码。 **步骤2：**使用条件注释加载针对IE8的特殊样式表： `...

    jquery表格插件Flexigrid

    2. **HTML结构**：创建一个Flexigrid表格需要特定的HTML结构，通常包括一个`&lt;div&gt;`元素作为容器，以及一个用于显示表格的`&lt;table&gt;`元素。开发者需要按照规范设置这些元素的ID，以便于Flexigrid初始化时正确绑定。 3...

    flexigrid使用实例

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

    flexigrid，数据显示控件

    3. 初始化配置：在JavaScript中，使用jQuery选择器获取div元素，并调用`.flexigrid()`方法进行初始化。初始化时，需要传入包含URL（用于获取数据）和其他配置项的对象，如分页、排序、列定义等。 ```javascript $(...

    SSH整合应用+Jquary+Flexigrid实现表格数据显示

    - `getUsers` Action：通过`UserAction`类的`getUserList`方法获取用户列表，结果类型设置为`json`，这意味着数据将以JSON格式返回，供前端Jquery的Flexigrid插件使用。 在`src`目录下，有三个XML文件分别配置了...

    Flexigrid——功能丰富的数据表格

    Flexigrid是一个基于jQuery的数据表格应用，功能丰富，支持多栏调用和滚屏操作，能够连接XML格式的数据源，并使用Ajax动态载入。支持分类栏标题，支持主题切换，可以转换为普通的表格，可以显示隐藏栏目等。

    Flexigrid与struts2的整合使用说明

    3. JavaScript配置：在文档加载完成后，使用jQuery选择器找到表格，并调用`.flexigrid()`方法进行初始化。你可以传递参数来定制网格的行为，如宽度、高度、列定义等。例如： ```javascript $("#flex1").flexigrid({ ...

    flexigrid表格插件

    在使用Flexigrid时，开发者通常会将数据源与服务器进行交互，通过JSON或XML格式获取数据，然后在前端渲染成表格。这个过程涉及到Ajax请求，通常使用jQuery的$.ajax方法来实现。同时，为了更好地控制和扩展功能，...

    flexiGrid列表ajax操作

    FlexiGrid提供了多种内置事件，如`onBeforeLoad`、`onLoadSuccess`等，可以用来在数据加载前后执行自定义逻辑。例如，可以在`onLoadSuccess`中处理加载成功后的数据。 5. **分页、排序与过滤**： FlexiGrid支持...

    仿flexigrid样式，滚动到底自动加载，jquery

    开发者可能通过CSS样式表来实现这些效果，确保新的表格控件与Flexigrid保持一致的视觉体验。 描述中提到的"滚动到底自动加载"是一种常见的无限滚动或懒加载技术。当用户滚动到表格的底部时，Gdftable会自动请求更多...

    Flexigrid使用实例

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

    jquery+flexigrid使用方法.pdf

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

    flexigrid相关

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

    jquery 表格插件 Flexigrid

    在本文中，我们将深入探讨Flexigrid的核心特性、使用方法以及常见应用场景。 1. **核心特性** - **响应式设计**：Flexigrid支持响应式布局，这意味着表格可以根据屏幕大小自动调整，适应不同的设备，如桌面、平板...

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

    FlexiGrid是一款基于jQuery的轻量级表格插件，它为开发者提供了简单易用的方式来展示和操作数据表格。FlexiGrid支持多种功能，如排序、分页、筛选等，非常适合用于展示动态数据或对数据进行交互式操作的场景。本文将...

Magicbox
Global site tag (gtag.js) - Google Analytics