一种残膜回收机防缠绕挑膜装置的制 一种秧草收获机用电力驱动行走机构

一种拓展jQuery表格插件功能的方法与流程

2021-12-04 02:17:00 来源:中国专利 TAG:
一种拓展jquery表格插件功能的方法
技术领域
:1.本发明涉及表格高级交互的
技术领域
:,具体涉及一种拓展jquery表格插件功能的方法。
背景技术
::2.datatable是一款jquery表格插件;它是一个当前使用较为广泛的表格工具,具备按行列显示表格数据、分页、筛选和排序等功能。3.现有的表格插件中,表头(列)项基本在代码中固定;当表格列数目过多时,会出现屏幕溢出;当表头(列)顺序或显隐需要调整时,需要在代码中修改,灵活性、可修改性较差;各单元格如果内容较多时,会出现显示内容不全,无法做到一目了然。4.现有的技术方案是通过开发人员修改硬编码实现,实际操作性、灵活性不强,且会因为需求变化、屏幕分辨率不同等出现显示异常,影响用户体验。技术实现要素:5.本发明的目的在于:针对目前表格插件中,当表格列数目过多时,会出现屏幕溢出;当表头(列)顺序或显隐需要调整时,需要在代码中修改,灵活性、可修改性较差;各单元格如果内容较多时,会出现显示内容不全,无法做到一目了然的问题,提供了一种拓展jquery表格插件功能的方法,解决了上述问题。6.本发明的技术方案如下:7.一种拓展jquery表格插件功能的方法,包括以下步骤:8.a)打开jquery表格,在jquery表格的html页面,搭建表格,即搭建table的grid;9.b)在同一html页面,设置列按钮;10.c)添加按钮控件;11.d)将datatable(一款jquery表格插件,可以给html表格添加交互功能,如分页、搜索)与表格进行绑定;12.e)重写datatable的javascript和层叠样式表。13.步骤a中表格包括表头<thead>和表格内容<tbody>。14.步骤b中列按钮与表头<thead>顺序相同、内容相同。15.步骤c中按钮控件包括列的显示按钮、列的隐藏按钮、表格列数据显示折行按钮、设置表格显示顺序按钮和设置表格列宽度按钮;便于点击相应按钮实现相应功能的作用。16.步骤d的详细步骤为:调用datatable的javascript和css(层叠样式表),与表格的id进行绑定,实现基本的显示、排序和搜索功能;这里的绑定方式才有现有的绑定方式即可。17.步骤e的详细步骤为:18.e1)添加获取cookie的方法,即在系统中添加一个获取cookie的程序,预存在系统里,方便需要的时候,可以直接使用;主要作用是:获取指定名称的cookie值,当获取的是多个cookie值时,保存的时候是以分号或空格分开;19.e2)添加设置cookie的方法;即在系统中添加一个获取cookie的程序,预存在系统里,方便需要的时候,可以直接使用;将cookie的value值与表格的id一一对应。20.e3)添加表格列的初始化方法;即在系统中添加一个获取cookie的程序,预存在系统里,方便需要的时候,可以直接使用;该方法在执行完步骤d的时候触发,将表格进行初始化;该方法首先获取table(表格)对象、table(表格)标签的id和模态框顶级<div>的id,然后调用e1和e2的方法,根据cookie的信息控制列的显示隐藏;21.e4)添加与步骤c中的按钮控件相对应的执行功能函数,所述执行功能函数包括:列的显示与隐藏的执行功能函数、表格列数据显示折行的执行功能函数、表格显示顺序的执行功能函数和设置表格列宽度的执行功能函数;其中具体步骤如下:22.添加列的显示与隐藏的执行功能函数的具体步骤如下:23.e4.1)获取table(表格)对象、table(表格)标签的id和模态框顶级<div>的id,实质上是直接采用步骤e3获取的获取table(表格)对象、table(表格)标签的id和模态框顶级<div>的id;相当于形成循环,多次修改和调整;24.e4.2)对获取的模态框顶级<div>的id绑定click事件;25.e4.3)获取列的接口对象,根据当前列的显隐状态做出判断:如果列的状态为显示,则添加对应的css(层叠样式表)和class,并更改状态;如果列的状态为隐藏,则删除对应的层叠样式表和class,并更改状态;26.e4.4)将步骤e4.1中获取的模态框顶级<div>的id和e4.3中的列的显隐状态存入数组;再调用步骤e2中添加的设置cookie的方法,进行存储。27.添加表格列数据显示折行的执行功能函数的具体步骤如下:28.e4.5)获取表格列显示的<li>标签,将<li>标签与表格列数据显示折行按钮的状态进行绑定;29.e4.6)点击表格列数据显示折行按钮,传递标识值;当选择折行时,传递的flag(标识)值为1,此时为每列单元格添加如下css(层叠样式表属性):“text‑overflow”:“ellipsis”,“white‑space”:“pre‑wrap”;当选择不折行时,传递的flag(标识)值为0,此时为每列单元格添加如下css(层叠样式表属性):“text‑overflow”:“inherit”,“white‑space”:“nowrap”;30.text‑overflow属性的主要作用是:规定当文本溢出包含元素时发生的事情,如果是ellipsis:显示省略符号来代表被修剪的文本;如果是inherit:展示全部文本;31.white‑space属性的主要作用是:设置如何处理元素内的空白,如果是pre‑wrap:保留空白符序列,但是正常地进行换行;如果是nowrap:文本不会换行,文本会在在同一行上继续。32.添加设置表格显示顺序的执行功能函数的具体步骤如下:33.e4.7)获取表格列显示的<li>标签,将<li>标签与设置表格显示顺序按钮的状态进行绑定;34.e4.8)获取表格中的所有列的<div>的id,并设置对应列的按钮,以便拖动;35.e4.9)将对应列的按钮与步骤e4.8获取的id绑定,并设置相关css(层叠样式表),实现拖动相关列,并将顺序存入相应的数组中;36.e4.10)添加调取获取每一列宽度的函数方法,以获取每一列的宽度;37.e4.11)e4.7、e4.8、e4.9和e4.10,实质上均是准备工作,先把程序写在那里,便于调用;步骤e4.11,当拖动列,使列的顺序发明变化后,保存e4.9中列的顺序,调用e4.10中添加的函数方法和调用e2中添加的设置cookie的方法,将cookie的value值与id一一对应。38.添加设置表格列宽度的执行功能函数的具体步骤如下:39.e4.12)获取表格列显示的<li>标签,将<li>标签与按钮控件的状态进行绑定;40.e4.13)获取表格中的所有列的<div>(column)的id,并设置对应列的按钮;并为每一列添加input;所述按钮为点击按钮,点击后弹出input对话框,可以由用户填入相应的宽度;41.e4.14)将步骤e4.13的列宽度储存到数组中,并将数组传入并调用步骤e4.10中添加的函数和步骤e2中添加设置cookie的方法中。42.e5)当执行完步骤e3中添加的表格列的初始化方法后,执行步骤c,并将步骤c中添加的按钮控件与相对应的执行功能函数进行绑定。43.与现有的技术相比本发明的有益效果是:44.1、一种拓展jquery表格插件功能的方法,包括以下步骤:首先在jquery表格的html页面,搭建表格,然后在html页面设置列按钮;然后添加多个按钮控件,进而将datatable与表格进行绑定,最后重写datatable的javascript和层叠样式表;以实现点击不同的按钮,可实现不同的扩展功能;使用者可以在页面上,通过点击按钮的方式,根据实际使用需求,灵活修改表头(列)的显隐、显示顺序、设置每一列的显示宽度和显示各单元格全部数据。附图说明45.图1为一种拓展jquery表格插件功能的方法的流程图。具体实施方式46.需要说明的是,术语“第一”和“第二”等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来,而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且,术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含,从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素,而且还包括没有明确列出的其他要素,或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下,由语句“包括一个……”限定的要素,并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。47.下面结合实施例对本发明的特征和性能作进一步的详细描述。48.实施例49.请参阅图1,一种拓展jquery表格插件功能的方法,包括以下步骤:50.a)打开jquery表格,在jquery表格的html页面,搭建表格,即搭建table的grid;51.b)在同一html页面,设置列按钮;52.c)添加按钮控件;53.d)将datatable(一款jquery表格插件,可以给html表格添加交互功能,如分页、搜索)与表格进行绑定;54.e)重写datatable的javascript和层叠样式表。55.步骤a中表格包括表头<thead>和表格内容<tbody>。56.步骤b中列按钮与表头<thead>顺序相同、内容相同。57.步骤c中按钮控件包括列的显示按钮、列的隐藏按钮、表格列数据显示折行按钮、设置表格显示顺序按钮和设置表格列宽度按钮;便于点击相应按钮实现相应功能的作用。58.步骤d的详细步骤为:调用datatable的javascript和css(层叠样式表),与表格的id进行绑定,实现基本的显示、排序和搜索功能;这里的绑定方式才有现有的绑定方式即可。59.步骤e的详细步骤为:60.e1)添加获取cookie的方法,即在系统中添加一个获取cookie的程序,预存在系统里,方便需要的时候,可以直接使用;主要作用是:获取指定名称的cookie值,当获取的是多个cookie值时,保存的时候是以分号或空格分开;61.e2)添加设置cookie的方法;即在系统中添加一个获取cookie的程序,预存在系统里,方便需要的时候,可以直接使用;将cookie的value值与表格的id一一对应。62.e3)添加表格列的初始化方法;即在系统中添加一个获取cookie的程序,预存在系统里,方便需要的时候,可以直接使用;该方法在执行完步骤d的时候触发,将表格进行初始化;该方法首先获取table(表格)对象、table(表格)标签的id和模态框顶级<div>的id,然后调用e1和e2的方法,根据cookie的信息控制列的显示隐藏;63.e4)添加与步骤c中的按钮控件相对应的执行功能函数,所述执行功能函数包括:列的显示与隐藏的执行功能函数、表格列数据显示折行的执行功能函数、表格显示顺序的执行功能函数和设置表格列宽度的执行功能函数;其中具体步骤如下:64.添加列的显示与隐藏的执行功能函数的具体步骤如下:65.e4.1)获取table(表格)对象、table(表格)标签的id和模态框顶级<div>的id,实质上是直接采用步骤e3获取的获取table(表格)对象、table(表格)标签的id和模态框顶级<div>的id;相当于形成循环,多次修改和调整;66.e4.2)对获取的模态框顶级<div>的id绑定click事件;67.e4.3)获取列的接口对象,根据当前列的显隐状态做出判断:如果列的状态为显示,则添加对应的css(层叠样式表)和class,并更改状态;如果列的状态为隐藏,则删除对应的层叠样式表和class,并更改状态;68.e4.4)将步骤e4.1中获取的模态框顶级<div>的id和e4.3中的列的显隐状态存入数组;再调用步骤e2中添加的设置cookie的方法,进行存储。69.添加表格列数据显示折行的执行功能函数的具体步骤如下:70.e4.5)获取表格列显示的<li>标签,将<li>标签与表格列数据显示折行按钮的状态进行绑定;71.e4.6)点击表格列数据显示折行按钮,传递标识值;当选择折行时,传递的flag(标识)值为1,此时为每列单元格添加如下css(层叠样式表属性):“text‑overflow”:“ellipsis”,“white‑space”:“pre‑wrap”;当选择不折行时,传递的flag(标识)值为0,此时为每列单元格添加如下css(层叠样式表属性):“text‑overflow”:“inherit”,“white‑space”:“nowrap”;72.text‑overflow属性的主要作用是:规定当文本溢出包含元素时发生的事情,如果是ellipsis:显示省略符号来代表被修剪的文本;如果是inherit:展示全部文本;73.white‑space属性的主要作用是:设置如何处理元素内的空白,如果是pre‑wrap:保留空白符序列,但是正常地进行换行;如果是nowrap:文本不会换行,文本会在在同一行上继续。74.添加设置表格显示顺序的执行功能函数的具体步骤如下:75.e4.7)获取表格列显示的<li>标签,将<li>标签与设置表格显示顺序按钮的状态进行绑定;76.e4.8)获取表格中的所有列的<div>的id,并设置对应列的按钮,以便拖动;77.e4.9)将对应列的按钮与步骤e4.8获取的id绑定,并设置相关css(层叠样式表),实现拖动相关列,并将顺序存入相应的数组中;78.e4.10)添加调取获取每一列宽度的函数方法,以获取每一列的宽度;79.e4.11)e4.7、e4.8、e4.9和e4.10,实质上均是准备工作,先把程序写在那里,便于调用;步骤e4.11,当拖动列,使列的顺序发明变化后,保存e4.9中列的顺序,调用e4.10中添加的函数方法和调用e2中添加的设置cookie的方法,将cookie的value值与id一一对应。80.添加设置表格列宽度的执行功能函数的具体步骤如下:81.e4.12)获取表格列显示的<li>标签,将<li>标签与按钮控件的状态进行绑定;82.e4.13)获取表格中的所有列的<div>(column)的id,并设置对应列的按钮;并为每一列添加input;所述按钮为点击按钮,点击后弹出input对话框,可以由用户填入相应的宽度;83.e4.14)将步骤e4.13的列宽度储存到数组中,并将数组传入并调用步骤e4.10中添加的函数和步骤e2中添加设置cookie的方法中。84.e5)当执行完步骤e3中添加的表格列的初始化方法后,执行步骤c,并将步骤c中添加的按钮控件与相对应的执行功能函数进行绑定。85.以上所述实施例仅表达了本技术的具体实施方式,其描述较为具体和详细,但并不能因此而理解为对本技术保护范围的限制。应当指出的是,对于本领域的普通技术人员来说,在不脱离本技术技术方案构思的前提下,还可以做出若干变形和改进,这些都属于本技术的保护范围。当前第1页12当前第1页12
再多了解一些

本文用于企业家、创业者技术爱好者查询,结果仅供参考。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

相关文献