前端插件
机械键盘侠
越学习越不懂
展开
-
JQuery Datatables辅助函数
数字辅助函数。number辅助函数提供了轻松格式化数字的功能。处理数字时,您可能经常希望添加格式,前缀和后缀字符(比如货币标示符),使用千位分隔符并制定数字的精度。使用number辅助函数可以做到这些。数字辅助函数包含五个可选参数1、千分位分隔符。(必须)2、小数点分隔符。(必须)3、浮点精度数。0代表整数,1代表一位小数,以此类推。(可选)4、前缀字符串。(可选)5、后缀字符串。(可选)//举个例子,以¥19.99的格式显示price数据,我们将使用:columns:[ .原创 2020-08-21 10:44:18 · 569 阅读 · 0 评论 -
JQuery Datatables单元格内显示数据太长,截取部分显示功能
//初始化表格var oTable = $("#example").DataTable({ ajax: { url: "dataList.action", data: { args1: "我是固定传参的值,在服务器接收参数[args1]" } }, columns: [{ data: "content", render: function(data, type, row, me.原创 2020-08-21 10:32:55 · 1317 阅读 · 0 评论 -
JQuery Datatables 数据操作
DataTables有4种内置数据操作,每一个都可能使用正交(独立)数据源。这四种操作如下,重点看前三个。display(string)//用于显示的数据sort(string)//用于排序的数据filter(string)//用于过滤的数据type(string)//类型检测数据比如有如下类型的数据源:{ "name": "Tiger Nixon", "position": "System Architect", "start_dat..原创 2020-08-21 10:30:57 · 737 阅读 · 0 评论 -
JQuery Datatables Ajax dataSrc的使用
Datatables在默认Ajax的情况下,dataSrc会去读取名称为data属性的数组$('#myTable').DataTable( { ajax: { url: '/api/myData', dataSrc: '' }, columns: [ ... ]} );// 或者使用标准的写法,指定在data中去找,效果和上面写法一样$('#myTable').DataTable( { ajax: { url.原创 2020-08-21 09:47:17 · 2494 阅读 · 0 评论 -
JQuery Datatables 获取实例及如何进行全局设置
可以使用以下三种方法获得一个新的Datatables API实例:$( selector ).DataTable();$( selector ).dataTable().api();new $.fn.dataTable.Api( selector );可以通过以下方法进行Datatables的全局设置//将以下JS代码单据引入后,默认之后所有的datatables生效$.extend( $.fn.datatable.defaults,{ searching:...原创 2020-08-21 09:35:18 · 548 阅读 · 0 评论 -
JQuery Datatables 样式Style
用了这么久的datatables,才发现datatables有具体的样式和详细说明,还可以自定义配置查看。点击这里进入datatables官网具体样式查看一、所有的class属性及示例HTML代码写法: 二、 表格内样式(字体居中、居左、居右等),targets代表列索引。 三、此外datatables还提供了主题生成器,可以自定义生成表格边框颜色、...原创 2020-08-21 09:20:05 · 2633 阅读 · 0 评论 -
JQuery DataTables改变行或列的背景或字体颜色
var table;table = $('#example').DataTable({ dom: 'Bfrtip', scrollY: true, scrollX: true, scrollCollapse: true, colReorder: true, select: true, stateSave: true, .原创 2020-07-15 08:38:40 · 4779 阅读 · 0 评论 -
JQuery Datatables 实现对某一列的数据合计汇总
有两种实现方式,举例说明第一种、JS代码如下:var table;table = $('#example').DataTable({ dom: 'Bfrtip', scrollY: true, scrollX: true, scrollCollapse: true, colReorder: true, select: true,原创 2020-07-15 08:21:31 · 2776 阅读 · 0 评论 -
使用Jquery插件bTabs实现多页签打开效果
官网地址:点击这里进入官网资源导入<link rel="stylesheet" href="b.tabs.css" type="text/css"><!-- 插件核心脚本 --><script type="text/javascript" src="b.tabs.js" ></script><!-- 插件拖动效果脚本 --&...原创 2020-04-30 12:49:48 · 731 阅读 · 0 评论 -
JQuery Datatables —— 自定义导出列
在datatables中,如何选择性的导出那些指定的列,点击这里查看官网文档,只要配置一个属性并设置列索引即可,具体代码如下图所示:buttons: [ { extend: 'excel', className: 'btn btn-primary', fil...原创 2019-10-17 14:01:44 · 1198 阅读 · 0 评论 -
前端插件——Bootstrap Dual Listbox 简介
背景Bootstrap Dual Listbox是一款基于Bootstrap的双向select选择框控件,作为对multiple select的扩展,使用起来非常简单,功能也更强大。参考文章一参考文章二使用效果如下图所示:初始化HTML代码: <div class="form-horizontal"> <div class...原创 2019-10-05 15:26:07 · 2328 阅读 · 0 评论 -
Bootstrap-select使用说明
背景Bootstrap-select 是一款基于JQuery的 下拉菜单 插件,支持搜索和多项选择功能,支持Booststrap。点击这里进入Bootstrap-select中文官方网站使用效果如下图所示: 常用属性初始化:<select class="selectpicker"&g...原创 2019-09-30 16:46:31 · 1971 阅读 · 1 评论 -
JQuery Datatables 在Bootstrap tab中列名无法对齐的问题
如下图所示:增加一句代码即可: $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { //当切换tab时,强制重新计算列宽 $.fn.dataTable.tables({ visible: true, api: true }).columns.adjust(); });...原创 2019-09-27 17:43:06 · 441 阅读 · 0 评论 -
Buttons——CSS按钮样式库
点击进入查看官网说明不同颜色按钮: <button class="button button-3d button-primary">button1</button> <button class="button button-3d button-action">button2</button> <button...原创 2019-09-12 15:29:37 · 3944 阅读 · 0 评论 -
利用JQuery插件CleverTabs实现多页签打开效果
在VS中,我们能打开多页签,并在不同的页签之间进行浏览和操作,这一功能通过JQuery插件CleverTabs也能实现此效果。CleverTabs下载请点击这里:JQuery CleverTabs本文采用ASP.NET MVC技术实现效果:要在布局页中点击不同的选择栏,根据不同的选择栏打开不同的网页链接而新增不同页签效果。首先新建一个空的MVC项目,并在_Layout布局页中引入JS...原创 2019-07-01 15:04:15 · 1718 阅读 · 0 评论 -
前端控件JQuery Datatables使用——常用功能初始化
本文用于自己记录,忘记时可以用来回顾。点击这里进入JQuerydatatable官网API地址JQuery Datatables初始化个人比较喜欢JQueryDatatables的Bootstrap4风格,所以文章以Bootstrap4风格为例。JQueryDatatable的初始化很简单,按照官网的举例说明,只要如下几个JS和CSS文件即可:1、jquery-3.3.1.m...原创 2019-08-20 14:30:56 · 5016 阅读 · 3 评论 -
利用ASP.NET MVC 的默认类型绑定器---将Jquery datatables中的数据强类型绑定到实体类中
背景描述:本文参考资料:https://blog.csdn.net/honantic/article/details/45913403阅读了上述博文后对我产生了启发,在ASP.NET MVC 5中如何将大批量的数据比如说表格中的数据传到后台,是否可以像HTML辅助类一样强类型绑定实体类属性并将数据传到后台?通过上述博文,我们知道了,默认的绑定器会从input标签里面获得name特性的值,绑...原创 2019-06-11 12:04:57 · 471 阅读 · 0 评论 -
JQuery Datatables 服务端分页简单应用学习
背景介绍 最近在一个简单小项目中碰到需要一个前端数据表格控件,在看了网上的资料后最终选择了JQuery Datatables。Datatables功能及其强大,基本满足我的所有需求,在加上其插件Editor具有inline模式,很多需要直接修改数据的功能不在需再弹出窗口或者模态框进行修改,而是可以直接行内编辑,这对于开发者来说是及其方便的,再加上网上和其官网上有众...原创 2019-05-24 15:08:58 · 884 阅读 · 0 评论 -
JQuery Datatables editor进行增删改查操作(一)
背景editor作为Datatables的插件之一,功能十分强大,有全行编辑模式、泡泡编辑模式、行内编辑模式。个人觉得,除了泡泡编辑模式外,其他两种模式功能在实际项目中会经常使用到,泡泡模式提供了模态框可以对表格内的数据进行增改删功能,而行内编辑功能更是在一些单据编辑功能中是必不可少的。网上对editor插件使用描述的文章太少,可能由于editor插件是付费的缘故吧,很多文章描述十分简单,或代...原创 2019-09-08 15:38:52 · 4303 阅读 · 1 评论 -
JQuery Datatables editor进行增删改查操作(二)
背景上一篇对editor进行了一个基本功能的初始化操作演示,本文进一步了解下editor在上一篇文章功能的基础上添加了部分常用基本功能。整体界面如下图所示:新增界面:新增界面增加了单选按钮,下拉框,和时间选择器,还有右下角的“取消”按钮: 时间选择器: 在点击“新增”按...原创 2019-09-09 12:48:10 · 1284 阅读 · 0 评论 -
JQuery Datatables editor 本地编辑功能
背景很多项目需求中,不需要表格自己进行AJax操作,数据的交互需要另外写代码实现,表格只需要提供本地编辑即可,这该怎么办呢?其实editor对这种实现很简单,去掉editor中的ajax属性即可。可以点击这里查看editor官方网站对本地编辑的说明我调用上一篇文章中的代码作为演示,代码有点长,只需要看到我注释了editor中的ajax属性即可: $(document).read...原创 2019-09-09 14:54:38 · 1650 阅读 · 11 评论 -
JQuery Datatables editor 行内编辑功能
背景ERP软件中,能进行行内编辑的表单是常用功能,行内编辑功能能让用户在表格中自己填写、修改、删除数据或者选择数据,可以说表格控件是ERP软件的核心控件,而行内编辑功能是核心中的关键。本文会继续接着上一篇文章的介绍继续增加功能。editor同样支持行内编辑,并且只需要几句代码即可,首先开启行内编辑功能:$('#example').on('click', 'tbody td.Edi...原创 2019-09-09 15:38:01 · 6278 阅读 · 1 评论 -
JQuery Datatables 动态配置参数异步加载数据
背景需求在前端动态设置datatables需要传递到后端的查询参数,异步加载返回的数据。点击这里进入datatables中文网异步加载数据说明直接上代码var table;var url = "/Home/index";table = $('#example').DataTable({ ajax: { url: url, ...原创 2019-09-10 10:42:26 · 1425 阅读 · 0 评论 -
JQuery Datatables editor 在编辑前刷新数据
背景在同一时间,可能很多人在编辑修改同一数据,这会导致在一个人还在在修改的过程中另一人在完成了修改并保存了数据。editor在button插件的扩展中可以有效的缓解这个问题:自定义一个编辑按钮,此编辑按钮实现 点击按钮后,首先刷新数据,然后再弹出模态框的功能。详细信息点击这里查看官网说明使用效果如下图所示:点击刷新并编辑 按钮,按钮会有一个加载状态的动画效果,此刻正在刷新数据,刷新...原创 2019-09-11 11:30:21 · 596 阅读 · 0 评论 -
JQuery Datatables 显示行的附加信息
点击这里查看datatables官网介绍点击这里查看datatables中文网介绍效果如下图所示:点击首列调用ajax返回数据,并展开明细行如下图所示:CSS代码: td.details-control { background: url('../../scripts/datatables-1.10.19/images/d...原创 2019-09-12 09:45:02 · 878 阅读 · 0 评论 -
一款轻量级的消息提示插件 —— toastr
toastr是一款轻量级的消息提示插件,基于JQuery,使用简单方便,外观大气漂亮。点击这里进入toastr在线调试使用 点击这里进入toastr官方网站使用效果如下图所示: 插件使用需要引用的JS和CSS文件如下图所示:各版本JQuery:jquery-3.3.1.m...原创 2019-09-05 15:52:43 · 6824 阅读 · 0 评论