zha_zi
- 浏览: 598371 次
- 性别:
- 来自: 西安
-
文章分类
最新评论
-
青春依旧：
html5教学哪家强！当然要上华清远见！
深入理解浏览器兼容性模式 -
ashur：
真机智，看得我都笑自己了
js 字符串转dom 和dom 转字符串 -
panghaoyu：
实现一个智能提示功能需要ajax、数据库、jsp/php、算法 ...
solr第一弹 autocomplete(自动补全) -
FakLove：
连线如何删除啊
基于html5 的拖拽连线 -
FakLove：
连线可以再删除吗？
基于html5 的拖拽连线
闲来无事在网上找了一个jquery的grid插件 flexgird，
看了看大概的效果感觉挺喜欢的，想在自己的项目中使用一下，就在bolg上搜索了几篇关于flexgird的文章，按照文章上的说明一步一步来但是就是没法出来table页面上面一片空白 ，感觉很奇怪，是不是那里有问题？
最后发现在下载的压缩包里有例子，例子就在解压后的flexigrid文件夹中的index.html
这里面有各种样式的table以及使用代码
哈哈 这下不用迷茫了，随便吧例子中的代码粘贴过来 立马效果就出现了
现在我把执行通过的页面代码奉上
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Flexigrid</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" type="text/css" href="css/flexigrid/flexigrid.css"/>
<script type="text/javascript" src="lib/jquery/jquery.js"></script>
<script type="text/javascript" src="flexigrid.js"></script>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
<table id="flex1" style="display:none"></table>
<script type="text/javascript">
$('.flexme1').flexigrid();
$('.flexme2').flexigrid({height:'auto',striped:false});
$("#flex1").flexigrid
(
{
url: 'post2.php',
dataType: 'json',
colModel : [
{display: '信息编号', name : 'RINO', width : 50, sortable : true, align: 'center',hide: false},
{display: '信息标题', name : 'RITITLE', width : 250, sortable : true, align: 'center'},
{display: '信息类别', name : 'IC.ICNAME', width : 100, sortable : true, align: 'center'},
{display: '信息热点', name : 'RIHOTPOINT', width : 60, sortable : true, align: 'center'},
{display: '信息内容', name : 'RICONTENT', width : 100, sortable : true, align: 'center'},
{display: '发布日期', name : 'RIDATE', width : 120, sortable : true, align: 'center'},
{display: '发布作者', name : 'RIAUTHOR', width : 80, sortable : true, align: 'center'}
],
buttons : [
{name: '添加', bclass: 'add', onpress : test},
{name: '删除', bclass: 'delete', onpress : test},
{separator: true}
],
searchitems : [
{display: 'ISO', name : 'iso'},
{display: 'Name', name : 'name', isdefault: true}
],
sortname: "iso",
sortorder: "asc",
usepager: true,
title: 'Countries',
useRp: true,
rp: 15,
showTableToggleBtn: true,
width: 700,
height: 200
}
);
function test(com,grid)
{
if (com=='Delete')
{
confirm('Delete ' + $('.trSelected',grid).length + ' items?')
}
else if (com=='Add')
{
alert('Add New Item');
}
}
$("#flex2").flexigrid
(
{
url: 'post2.php',
dataType: 'json',
colModel : [
{display: 'ISO', name : 'iso', width : 40, sortable : true, align: 'center'},
{display: 'Name', name : 'name', width : 180, sortable : true, align: 'left'},
{display: 'Printable Name', name : 'printable_name', width : 120, sortable : true, align: 'left'},
{display: 'ISO3', name : 'iso3', width : 130, sortable : true, align: 'left', hide: true},
{display: 'Number Code', name : 'numcode', width : 80, sortable : true, align: 'right'}
],
buttons : [
{name: 'Add', bclass: 'add', onpress : test},
{name: 'Delete', bclass: 'delete', onpress : test},
{separator: true}
],
searchitems : [
{display: 'ISO', name : 'iso'},
{display: 'Name', name : 'name', isdefault: true}
],
sortname: "iso",
sortorder: "asc",
usepager: true,
title: 'Countries',
useRp: true,
rp: 15,
showTableToggleBtn: true,
width: 700,
height: 200
}
);
$('b.top').click
(
function ()
{
$(this).parent().toggleClass('fh');
}
);
</script>
</body>
</html>
要注意的是这两句
<link rel="stylesheet" type="text/css" href="css/flexigrid/flexigrid.css"/> <script type="text/javascript" src="lib/jquery/jquery.js"></script> <script type="text/javascript" src="flexigrid.js"></script>
根据你的flexigrid.css,jquery.js,flexigrid.js存放的实际位置修改。
flexigrid参数介绍
1. height: 200, //flexigrid插件的高度，单位为px
2. width: ‘auto’, //宽度值，auto表示根据每列的宽度自动计算
3. striped: true, //是否显示斑纹效果，默认是奇偶交互的形式
4. novstripe: false,
5. minwidth: 30, //列的最小宽度
6. minheight: 80, //列的最小高度
7. resizable: true, //是否可伸缩
8. url: false, //ajax方式对应的url地址
9. method: ‘POST’, // 数据发送方式
10. dataType: ‘xml’, // 数据加载的类型
11. errormsg: ‘Connection Error’,//错误提升信息
12. usepager: false, //是否分页
13. nowrap: true, //是否不换行
14. page: 1, //默认当前页
15. total: 1, //总页面数
16. useRp: true, //是否可以动态设置每页显示的结果数
17. rp: 15, // 每页默认的结果数
18. rpOptions: [10,15,20,25,40],//可选择设定的每页结果数
19. title: false,//是否包含标题
20. pagestat: ‘Displaying {from} to {to} of {total} items’,//显示当前页和总页面的样式
21. procmsg: ‘Processing, please wait …’,//正在处理的提示信息
22. query: ”,//搜索查询的条件
23. qtype: ”,//搜索查询的类别
24. nomsg: ‘No items’,//无结果的提示信息
25. minColToggle: 1, //minimum allowed column to be hidden
26. showToggleBtn: true, //show or hide column toggle popup
27. hideOnSubmit: true,//隐藏提交
28. autoload: true,//自动加载
29. blockOpacity: 0.5,//透明度设置
30. onToggleCol: false,//当在行之间转换时
31. onChangeSort: false,//当改变排序时
32. onSuccess: false,//成功后执行
33. onSubmit: false // 调用自定义的计算函数
后来发现flexigrid是采用ajax做的分页前进后退都比较麻烦
没有在项目中采用
- flexigrid.zip (120.1 KB)
- 下载次数: 279
分享到：
发表评论
-
浏览器事件是冒泡还是捕获
2016-07-27 16:37 3061这是三种事件处理的模型 （1）冒泡型事件：事件按照从最特定 ... -
javascript 编程反思1 new 原理
2016-04-27 14:05 0我们在定义对象的时候通常使用两种方式 1：通过new 关键 ... -
javascript 设计模式1 单例模式
2015-06-15 15:10 0... -
facebook html5开发app 失败的原因，
2015-06-08 11:56 1981Here’s why the Facebook iOS a ... -
jQuery zepto 用法区别
2015-05-22 11:50 0以前都是用jQuery 因为移动项目中在使用zepto 基本 ... -
js 加载机制和defer async用法
2015-05-15 17:45 0这是今天我一个 ... -
grunt 不是内部命令
2015-05-04 19:21 1479grunt 不是内部命令！！ ... -
你不知道的URL中#井号用法
2015-02-10 12:36 7123URL 中 # 井号的用法 ... -
JS 伪数组原理详解
2014-12-01 11:24 2514jav ... -
jquery 滚动条插件nanoScroller 的用法
2014-11-27 11:17 5737scroller 插件nanoSc ... -
h5，hybrid 开发中问题汇总
2014-10-17 11:26 8250H5开发问题总结 和jqu ... -
backbone中的 reuter 和histroy
2014-10-13 10:45 649Router和History (路由控制) Back ... -
animate 技术分析 raphael
2014-07-28 16:40 0Animate 什么是animate，一般我 ... -
Raphaeljs 插件实现任意SVG节点加载
2014-07-14 09:26 8660SVG 和Raphael http://rap ... -
ECMAScript 5
2014-07-08 14:36 1081新版本在给基本库带来 ... -
jQueryUI Widget 代码详解
2014-07-07 12:20 0为什么需要研究JqueryUI 中Widget 的代码 ... -
typescript 用法介绍
2014-07-01 09:58 1255前言 Typescript的形態 如何定義va ... -
window.eval 与eval 区别
2014-06-27 10:57 1114它们之间有区别吗？ 开发过程中似乎很少有人去加个额外的win ... -
jQuery 学习分析系列1 jQuery是个什么东西
2014-06-23 10:06 0jQuery 的基本结构 过去使用jQuery ... -
Sizzle 引擎--原理与实践3
2014-06-18 14:05 810Sizzle引擎--原理与实践（三） 查找的入口对 ...
相关推荐
使用`$.ajax()`或`$.getJSON()`函数可以实现这一点。 2. **解析JSON**：jQuery提供了`$.parseJSON()`（在新版本中已弃用，推荐使用`JSON.parse()`）函数将JSON字符串转化为JavaScript对象。 3. **创建HTML结构**：...
常见的jQuery表格插件有DataTables、jqGrid、Flexigrid等。在本项目中，可能使用的是某一特定的表格插件，通过定制或配置实现所需功能。 二、分页 在大数据量的展示场景下，分页是一种常用的技术手段，可以避免一...
OpenGL是一种强大的图形库，用于创建2D和3D图形，广泛应用于游戏开发、科学可视化、工程设计等领域。在这个项目中，我们看到一个基于OpenGL的机械臂运动仿真程序，它能够实现机械臂在四个方向上的旋转。这样的模拟对于理解机械臂的工作原理、机器人控制算法以及进行虚拟环境中的机械臂运动测试具有重要意义。 我们需要了解OpenGL的基础知识。OpenGL是一个跨语言、跨平台的编程接口，用于渲染2D和3D矢量图形。它提供了大量的函数来处理图形的绘制，包括几何形状的定义、颜色设置、光照处理、纹理映射等。开发者通过OpenGL库调用这些函数，构建出复杂的图形场景。 在这个机械臂仿真程序中，C#被用来作为编程语言。C#通常与Windows平台上的.NET Framework配合使用，提供了一种面向对象的、类型安全的语言，支持现代编程特性如LINQ、异步编程等。结合OpenGL，C#可以构建高性能的图形应用。 机械臂的运动仿真涉及到几个关键的计算和控制概念： 1. **关节角度**：机械臂的每个部分（或关节）都有一个或多个自由度，表示为关节角度。这些角度决定了机械臂各部分的位置和方向。 2. **正向运动学**：根据关节角度计算机械臂末端执行器（如抓手）在空间中的位置和方向。这涉及将各个关节的角度转换为欧拉角或四元数，然后转化为笛卡尔坐标系的X、Y、Z位置和旋转。 3. **反向运动学**：给定末端执行器的目标位置和方向，计算出各关节所需的理想角度。这是一个逆向问题，通常需要解决非线性方程组。 4. **运动规划**：确定从当前状态到目标状态的路径，确保机械臂在运动过程中避免碰撞和其他约束。 5. **OpenGL的使用**：在OpenGL中，我们首先创建几何模型来表示机械臂的各个部分。然后，使用矩阵变换（如旋转、平移和缩放）来更新关节角度对模型的影响。这些变换组合起来，形成机械臂的动态运动。 6. **四向旋转**：机械臂可能有四个独立的旋转轴，允许它在X、Y、Z三个轴上旋转，以及额外的绕自身轴线的旋转。每个轴的旋转都由对应的关节角度控制。 7. **交互控制**：用户可能可以通过输入设备（如鼠标或键盘）调整关节角度，实时观察机械臂的运动。这需要将用户输入转换为关节角度，并应用到运动学模型中。 8. **图形渲染**：OpenGL提供了多种渲染技术，如深度测试、光照模型、纹理映射等，可以用于提高机械臂模拟的真实感。例如，可以添加材质和纹理来模拟金属表面，或者使用光照来增强立体感。 这个项目结合了OpenGL的图形渲染能力与C#的编程灵活性，构建了一个可以直观展示机械臂运动的仿真环境。通过理解并实现这些关键概念，开发者不仅能够学习到图形编程技巧，还能深入理解机器人学的基本原理。
android11 udpate-engine 系统升级模块源码下载
内容概要：本文详细介绍了如何在MATLAB环境中实现SVM二分类算法，涵盖数据预处理、参数寻优及结果可视化的全过程。首先进行数据归一化处理，确保各特征在同一量纲下参与模型训练。接着采用网格搜索法对SVM的关键参数c（惩罚系数）和g（核参数）进行自动化寻优，利用5折交叉验证评估每组参数的表现。最后通过等高线图和3D曲面图直观展示参数与准确率之间的关系，并完成最终模型的训练与预测。 适合人群：具有一定MATLAB编程基础的研究人员和技术爱好者，尤其是从事机器学习、数据分析领域的从业者。 使用场景及目标：适用于需要快速搭建SVM二分类模型并进行参数调优的项目。主要目标是在短时间内获得较高准确度的分类结果，同时掌握SVM的工作原理及其在MATLAB中的具体应用方法。 其他说明：文中提供了完整的代码示例，便于读者直接上手实践。此外还提到了一些常见的注意事项，如数据格式要求、类别不平衡处理以及特征工程的重要性等。
ffmpeg
江科大CAN入门教程，万字长文理解
内容概要：本文详细介绍了基于新唐N79E814单片机的移动电源设计方案，涵盖硬件架构、PCB原理图、电路设计、代码实现等方面。移动电源主要由电池、充电电路和输出电路构成，文中重点讲解了5V1A和5V2.1A两路输出的设计思路，包括同步整流、PWM控制、充电管理等关键技术。同时，文章还探讨了PCB布局、烧录注意事项、效率优化等内容，并提供了具体的代码示例和调试建议。 适合人群：具有一定电子技术和单片机开发基础的工程师和技术爱好者。 使用场景及目标：适用于希望深入了解移动电源设计原理和实现方法的人群，旨在帮助读者掌握从原理图绘制到实际产品制作的全过程，提升电路设计和调试能力。 其他说明：文章不仅提供了理论知识，还包括大量实践经验分享，如常见的调试陷阱和解决方法，有助于读者在实践中少走弯路。
动漫角色分割_基于深度学习实现的高精度动漫角色分割算法_附项目源码_优质项目实战
javacv实现的支持多种音视频播放的播放器，比如MP4、avi、mkv、flv、MP3、ogg、wav、au等多种音视频格式，非常好用。
开发调试demo,简单的自动登录功能,插件开发入门参考
内容概要：本文详细介绍了通过修改Windows注册表来启用和配置被禁用的用户账户（如WDAGUtilityAccount）的过程。首先，通过计算机管理界面查看被禁用的用户账户，并进入注册表编辑器定位到HKEY_LOCAL_MACHINE\SAM\SAM\Domains\Account\Users路径下的相应用户条目。接着，通过对特定用户的二进制数据进行编辑，包括复制和修改关键字段，实现对被禁用账户的克隆与重新启用。最后，验证账户状态的变化，并通过远程桌面连接测试新配置的有效性。 适合人群：具备一定Windows系统管理基础的技术人员，尤其是负责企业内部网络和用户账户管理的IT管理员。 使用场景及目标：①当需要恢复或重新配置被禁用的用户账户时；②在进行系统故障排除或安全审计时，了解如何通过注册表直接操作用户账户；③确保特定用户能够正常登录并访问远程桌面服务。 阅读建议：本文涉及较为底层的系统操作，建议读者在实际操作前充分备份系统和注册表，避免误操作导致系统不稳定。同时，对于不熟悉注册表编辑的用户，应先在测试环境中练习，确保掌握相关技能后再应用于生产环境。此外，建议结合官方文档或其他权威资料，加深对Windows用户账户管理机制的理解。
2025免费微信小程序毕业设计成品，包括源码+数据库+往届论文资料，附带启动教程和安装包。 启动教程：https://www.bilibili.com/video/BV1BfB2YYEnS 讲解视频：https://www.bilibili.com/video/BV1BVKMeZEYr 技术栈：Uniapp+Vue.js+SpringBoot+MySQL。 开发工具：Idea+VSCode+微信开发者工具。
内容概要：本文详细介绍了基于西门子S7-1200 PLC的两部六层电梯控制系统的设计与实现。主要内容涵盖前期准备工作，如选择合适的PLC型号和配置硬件；核心逻辑部分深入讲解了梯形图编程的具体实现方法，包括楼层呼叫逻辑、电梯运行方向控制以及两部电梯之间的协同工作；此外，文章还探讨了仿真测试的方法及其重要性，提供了许多实用技巧和注意事项。通过具体实例展示了如何利用博途V15软件进行电梯系统的开发，并分享了一些实际操作中的经验和常见问题解决方案。 适合人群：从事工业自动化领域的工程师和技术人员，特别是那些对PLC编程有兴趣或者正在参与类似项目的从业者。 使用场景及目标：适用于需要理解和掌握S7-1200 PLC编程技能的人群，尤其是希望通过实际案例加深对梯形图编程理解的学习者。目标是在实践中提高编程能力，能够独立完成类似的工程项目。 其他说明：文中不仅包含了详细的理论解释，还有丰富的代码片段供读者参考。对于初学者而言，建议先从单部电梯开始练习，逐步过渡到复杂的双梯联调。同时，作者强调了仿真测试的重要性，指出这是验证程序正确性和优化性能的关键步骤。
2025免费微信小程序毕业设计成品，包括源码+数据库+往届论文资料，附带启动教程和安装包。 启动教程：https://www.bilibili.com/video/BV1BfB2YYEnS 讲解视频：https://www.bilibili.com/video/BV1BVKMeZEYr 技术栈：Uniapp+Vue.js+SpringBoot+MySQL。 开发工具：Idea+VSCode+微信开发者工具。
内容概要：该资源为大学英语四级听力练习音频 MP3，包含丰富多样的听力素材。涵盖四级考试常见的各类场景，如校园生活（课程学习、社团活动等）、日常社交（聚会、聊天等）、工作求职（面试、职场事务等）、旅行交通（出行方式、景点介绍等）、饮食健康（餐厅点餐、健康养生等）。音频内容依照四级听力考试题型和难度精心录制，有短对话、长对话、短文听力等形式，且语速、口音等符合四级考试要求，助力考生熟悉考试形式与节奏。 适合人群：正在备考大学英语四级考试，希望提升听力水平的学生；英语基础中等，需要通过针对性练习来适应四级听力难度、提升听力理解能力的学习者；对英语听力学习有需求，想通过大量练习积累场景词汇、熟悉英语表达习惯的人群。 能学到什么：①熟悉四级听力考试的各类场景词汇，增强词汇储备并提升在听力语境中的反应速度；②掌握不同场景下的英语常用表达和句式，提升英语语言运用能力；③锻炼听力理解技巧，如抓取关键词、推断隐含意思、梳理篇章逻辑等；④适应四级听力考试的语速、口音和题型设置，增强应试能力和自信心。 阅读建议：制定系统的练习计划，定期定量进行听力练习，如每天安排 30 - 60 分钟；第一遍泛听，了解大致内容和主题；第二遍精听，逐句听写或分析不懂的词汇和句子；对照听力原文，明确错误和没听懂的地方，积累生词和表达；定期进行模拟测试，利用该音频模拟考试环境，检验学习效果并调整学习策略。
2000-2017年各省天然气消费量数据 1、时间：2000-2017年 2、来源：国家统计j、能源nj 3、指标：行政区划代码、城市、年份、天然气消费量 4、范围：31省
内容概要：本文详细介绍了基于西门子PLC1200的自动化控制系统，涵盖了PLC与库卡机器人通过Profinet通讯、PTO模式控制松下伺服、36路模拟量处理（包括压力检测、位置检测及压力输出）、以及26个温控器通过485总线通讯的关键技术和实现方法。此外，还包括了昆仑通态触摸屏的人机交互界面设计，提供了详细的硬件组态、软件编程指导和设备操作说明。 适合人群：从事工业自动化领域的工程师和技术人员，尤其是那些负责多设备协同控制项目的设计和实施的专业人士。 使用场景及目标：适用于需要整合多种设备（如PLC、机器人、伺服系统、温控器等）的复杂自动化生产线。主要目标是提高生产效率、增强系统的稳定性和可靠性，同时降低维护成本。 其他说明：文中不仅提供了具体的编程实例和硬件配置指南，还分享了许多实际调试过程中积累的经验教训，有助于读者在实际应用中少走弯路。
内容概要：本文深入探讨了AUTOSAR BSW（Basic Software）层所提供的各类服务、驱动、接口和管理器模块及其功能。BSW提供的服务包括I/O、Memory、Crypto、Communication、Off-board Communication和System等，涵盖了标准化的访问方式以确保不同硬件和系统的兼容性与安全性。BSW里的驱动分为内部驱动和外部驱动，分别用于控制和访问微控制器内部和外部的设备，确保硬件功能的正常运作。BSW里的接口（xx_IF）对下层模块进行抽象和封装，提供标准API接口，使上层应用无需关注底层硬件细节。BSW里的管理器（xxxM）则为多个客户端提供特定服务，能够修改或适配调整一些数据，以满足复杂需求。此外，文中还简要介绍了AUTOSAR里的库文件，它们是无状态的函数集合，可被多个模块调用以实现特定功能。 适合人群：对汽车电子软件架构有一定了解，尤其是对AUTOSAR标准感兴趣的工程师和技术人员。 使用场景及目标：①理解BSW层提供的各类服务及其应用场景；②掌握BSW中驱动、接口和管理器模块的设计原理和功能；③了解库文件的作用及其在AUTOSAR架构中的位置。 其他说明：本文详细解释了BSW层各组件的功能和作用，帮助读者更好地理解AUTOSAR架构的设计思想和实现方法。建议读者结合实际项目经验，深入研究各模块的具体实现和应用场景。
内容概要：本文介绍了西门子1200系列PLC的伺服步进FB块程序，该程序由两个FB块组成，分别采用SCL语言和梯形图编写，支持PTO和PN模式，适用于多种伺服系统和步进电机。程序经过实际调试，稳定性高，兼容性强，能够灵活应用于单轴或多轴控制系统。文中提供了详细的代码示例和调试指南，帮助用户快速上手并解决常见问题。 适合人群：从事工业自动化控制领域的工程师和技术人员，尤其是使用西门子1200系列PLC进行项目开发的人员。 使用场景及目标：①用于单轴或多轴伺服步进系统的控制；②提高项目的开发效率和稳定性；③减少重复开发的工作量，加快项目进度。 其他说明：程序需要在TIA V14及以上版本打开，附带详细的文档说明和实际项目视频链接，方便用户理解和使用。