- 浏览: 440749 次
- 性别:
- 来自: 茂名
文章分类
最新评论
-
zenmshuo:
不错不错,总结的很详细,不知道这个控件和FlexGrid比起来 ...
jQuery EasyUI教程之datagrid应用(三) -
我是你们的爹:
文章里太多错误了,容易误导新手
jQuery EasyUI教程之datagrid应用(三) -
我是你们的爹:
...
jQuery EasyUI教程之datagrid应用(一) -
zhehen123:
你傻啊,json_decode后面跟一个参数就可以转成普通数组 ...
如何将PHP对象数组转换成普通数组? -
lai3221:
hegz,为什么做了没有任何效果呢?
jQuery EasyUI教程之datagrid应用(二)
目前,网络上能够找得到的、基于jQuery
框架
的、功能
比较强大的grid有两个:jqGrid和
Flexigrid。虽然这两个表格插件
没有Ext-Grid表格功能那么强大,但基本能满足日常应用
。jqGrid的用法石头在《封装了
jqGrid为control,大家用用看?
》的贴子里已做了具体介绍,在此我不再赘言。Flexigrid的功能比jqGrid稍弱,但胜在界
面美观(仿Ext),易于上手。下面我就Flexigrid在FleaPHP
下的使用方法进行具体说明。
一、Flexigrid的新特性:
- 可调整大小的列
- 可调整大小的高度和宽度
- 可排序的列标题
- 酷主题
- 可 将普通表格转换成grid
- 能够连接到一个AJAX 数据 源( 支持XML和JSON [新] )
- 分 页
- 显示/隐藏列
- 工具栏(新)
- 搜索(新)
- 可访问 的API
二、相关代码
下载
:
- 官方网站:http://www.flexigrid.info , 由于开发 者没有自己的主机,主页空间是申请的,因此官方网站经 常变换,这个不久之后很有可能变成死链。
- 最新源代码(目前为1.0B3)下载:http://code.google.com/p/flexigrid/ , 这个就不会经常变换了。
- jQuery框架代码下载:http://code.google.com/p/jqueryjs/downloads/list 。
- jQuery UI 下载:http://jqueryui.com/themeroller/ , 下载之前,最好先定制好自己喜欢的主题风格再下载。
- jQuery表单 插件下载:http://www.malsup.com/jquery/form/#download 。
- jQuery alert插件下载:http://abeautifulsite.net/notebook_files/87/jquery.alerts.zip 。
三、代码安装:
代码安装比较简单,将代码解压缩到自己项目
的相应子目录
下即可,我这里是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:
发表评论
-
jQuery EasyUI教程之datagrid应用(三)
2014-03-18 09:29 96705jQuery EasyUI教程之datagrid应用(三) ... -
jQuery EasyUI教程之datagrid应用(二)
2014-03-06 16:02 10657jQuery EasyUI教程之datagrid应用(二) ... -
jQuery EasyUI教程之datagrid应用(一)
2014-03-06 15:38 11729jQuery EasyUI教程之datagrid应用(一) ... -
用jQuery屏蔽掉按回车键时提交表单
2011-04-02 15:51 5370默认情况下,在表单输入框里按回车将会提交表单,但有时需要屏蔽掉 ... -
zxxbox jQuery弹出框插件
2010-10-22 23:22 1824新版无图片版zxxbox jQuery弹出框插件 by zh ... -
Ajax Upload多文件上传插件翻译及中文演示
2010-05-31 20:41 1163链接地址:http://www.zhangxinxu.com/ ... -
JQuery UI之Dialog对话框应用
2010-05-31 19:48 7582文章来源:http://lwlfree.cn/?p=208 ... -
Jquery UI dialog 详解
2010-05-31 19:27 2752文章来源:http://xufish.blogbus.com/ ... -
jQuery UI 1.7 中文文档
2010-05-31 19:15 2752UI 1.7.x 中文文档:http://jqueryui.n ... -
Colorize - jQuery表格插件
2010-05-07 15:13 2131Colorize是一个用来增加HT ... -
jQuery实现布局高宽自适应
2010-04-21 11:26 4680在页面布局(layout)时经常是上左右的框架布局并且需要宽、 ... -
jQuery.TreeView的使用介绍及其改进
2010-04-16 21:56 46160TreeView为Xuanye 打造的一款支持 jQuery ... -
jQuery.Form插件介绍
2010-04-07 23:19 5733一、前言 jQuery From插件是一个优秀的A ... -
jQuery源码查看器
2010-04-02 00:50 1065可以查看 jquery 1.2.6/1.3.2/1.4版本的每 ... -
jQuery png背景透明插件
2010-04-01 23:46 4295该插件不仅支持IE5/IE6/IE7下img标签的png背景透 ... -
jQuery 1.4 小阅兵
2010-04-01 08:25 1175该文简单整理了jQuery1.4改版后的变化,并指出了在开发过 ... -
jQuery 1.4 发布:15个新特性实例精讲
2010-03-31 23:45 1041jQuery 1.4 最近发布了 。 超乎大家的预期,这次并 ... -
jQuery.FlexiGrid使用总结
2010-03-30 10:06 19028经过对FlexiGrid的大量使用,及时不时琢磨下其代码,对她 ... -
jQuery插件开发
2010-03-29 20:38 782jQuery插件开发。 -
jQuery 1.2.6源码分析(pdf)
2010-03-29 20:35 2226jQuery源代码分析。
相关推荐
FlexiGrid是一款基于JQuery的表格插件,用于在网页中展示数据,具有分页、排序、筛选等功能,常用于后台管理系统中数据的展示。它提供了丰富的配置选项和灵活的扩展性,使得开发者可以根据需求定制表格的行为和样式...
在“flexigrid表格功能丰富”这一主题下,我们可以深入探讨Flexigrid的核心特性以及如何实现描述中的各项功能。 1. **支持两个表格行移动** Flexigrid允许用户通过拖放操作轻松调整表格行的顺序。这种功能对于展示...
在Java环境中,FlexiGrid通常与Servlets结合使用,以服务器端的数据作为数据源,通过JSON格式进行数据传输。 首先,让我们深入了解一下FlexiGrid的核心特性: 1. **数据绑定**:FlexiGrid可以绑定到不同的数据源,...
Flexigrid是一款基于jQuery的开源表格插件,它在功能和用户体验上模仿了Ext JS的Grid组件。这款插件以其轻量级、高效和丰富的特性,深受Web开发者喜爱,尤其适用于需要展示大量数据并进行排序、分页等操作的场景。 ...
Flexigrid是一款基于jQuery的强大的表格插件,它在Web应用中被广泛使用,用于创建交互式、可自定义的网格视图。Flexigrid以其灵活性和易用性著称,能够满足各种复杂的表格需求。以下是对Flexigrid主要功能和特性的...
假设在一个基于JSP的项目中,使用FlexiGrid插件后发现IE8下表格样式错乱。 **步骤1:**检查FlexiGrid官方文档中关于IE兼容性的说明,并根据需要调整CSS代码。 **步骤2:**使用条件注释加载针对IE8的特殊样式表: `...
2. **HTML结构**:创建一个Flexigrid表格需要特定的HTML结构,通常包括一个`<div>`元素作为容器,以及一个用于显示表格的`<table>`元素。开发者需要按照规范设置这些元素的ID,以便于Flexigrid初始化时正确绑定。 3...
Flexigrid是一款强大的JavaScript数据网格插件,常用于在网页中展示和操作表格数据。它提供了丰富的功能,如分页、排序、搜索以及自定义列宽等,使得数据的展示和管理更为便捷。本实例主要关注如何在PHP环境中集成和...
3. 初始化配置:在JavaScript中,使用jQuery选择器获取div元素,并调用`.flexigrid()`方法进行初始化。初始化时,需要传入包含URL(用于获取数据)和其他配置项的对象,如分页、排序、列定义等。 ```javascript $(...
- `getUsers` Action:通过`UserAction`类的`getUserList`方法获取用户列表,结果类型设置为`json`,这意味着数据将以JSON格式返回,供前端Jquery的Flexigrid插件使用。 在`src`目录下,有三个XML文件分别配置了...
Flexigrid是一个基于jQuery的数据表格应用,功能丰富,支持多栏调用和滚屏操作,能够连接XML格式的数据源,并使用Ajax动态载入。支持分类栏标题,支持主题切换,可以转换为普通的表格,可以显示隐藏栏目等。
3. JavaScript配置:在文档加载完成后,使用jQuery选择器找到表格,并调用`.flexigrid()`方法进行初始化。你可以传递参数来定制网格的行为,如宽度、高度、列定义等。例如: ```javascript $("#flex1").flexigrid({ ...
在使用Flexigrid时,开发者通常会将数据源与服务器进行交互,通过JSON或XML格式获取数据,然后在前端渲染成表格。这个过程涉及到Ajax请求,通常使用jQuery的$.ajax方法来实现。同时,为了更好地控制和扩展功能,...
FlexiGrid提供了多种内置事件,如`onBeforeLoad`、`onLoadSuccess`等,可以用来在数据加载前后执行自定义逻辑。例如,可以在`onLoadSuccess`中处理加载成功后的数据。 5. **分页、排序与过滤**: FlexiGrid支持...
开发者可能通过CSS样式表来实现这些效果,确保新的表格控件与Flexigrid保持一致的视觉体验。 描述中提到的"滚动到底自动加载"是一种常见的无限滚动或懒加载技术。当用户滚动到表格的底部时,Gdftable会自动请求更多...
本篇文章将深入探讨Flexigrid的使用方法,通过实例帮助读者更好地理解和应用。 1. **安装与引入** 在开始使用Flexigrid之前,需要将其库文件下载到项目中。在`Flexigrid`压缩包内,通常会包含`flexigrid.js`(核心...
jQuery与Flexigrid的结合使用在Web开发中常用于创建动态、交互性强的数据表格。Flexigrid是一款基于jQuery的插件,它提供了一种轻量级的方式来展示和操作网格数据,具有分页、排序、搜索等功能,特别适用于数据密集...
Flexigrid是一款基于jQuery的轻量级数据网格插件,用于在网页中展示和操作表格数据。它提供了丰富的功能,包括排序、分页、搜索、列宽调整等,使得数据管理更加直观和高效。在“flexigrid.js”和“flexigrid.css”这...
在本文中,我们将深入探讨Flexigrid的核心特性、使用方法以及常见应用场景。 1. **核心特性** - **响应式设计**:Flexigrid支持响应式布局,这意味着表格可以根据屏幕大小自动调整,适应不同的设备,如桌面、平板...
FlexiGrid是一款基于jQuery的轻量级表格插件,它为开发者提供了简单易用的方式来展示和操作数据表格。FlexiGrid支持多种功能,如排序、分页、筛选等,非常适合用于展示动态数据或对数据进行交互式操作的场景。本文将...