本文实例讲述了JQuery实现简单的复选框树形结构图。分享给大家供大家参考,具体如下:这是自己写的简单树形结构图,实现的功能有: 1.最左边的按钮实现子目录的隐藏和显示 2.点击父节点的复选框选中后,父节点下的所有的子节点也选中;父节点未选中,则下面的所有的子节点也取消选中(全选和全不选) 3.选中一个子节点时相应的父节点也选中;当所有的子节点都没有选中时,父节点也取消选中 这是实现的最简单的功能。下面来具体的谈谈具...
本文实例为大家分享了vue实现带复选框的树形菜单展示的具体代码,供大家参考,具体内容如下代码: <template><div id="checkTree"><div class="tree-box"><div class="zTreeDemoBackground left"><ul id="treeDemo" class="ztree"></ul></div></div></div> </template><script>export default {name: checkTree,components:{},data:function(){return{setting:{check: { enable: true, nocheckInherit: false }, data: { simpleDat...
一:在component文件夹下新建如下treeTable文件夹,里面有2个文件:eval.js:将数据转换成树形数据 /*** @Author: jianglei* @Date: 2017-10-12 12:06:49*/ "use strict"; import Vue from "vue"; export default function treeToArray(data,expandAll,parent = null,level = null ) {let tmp = [];Array.from(data).forEach(function(record) {if (record._expanded === undefined) {Vue.set(record, "_expanded", expandAll);}let...
最近vue项目需要用到三级CheckBox复选框,需要实现全选反选不确定三种状态。但是element-ui table只支持多选行,并不能支持三级及以上的多选,下面通过本文给大家讲解实现方法。 效果图预览:首先是页面布局,当然也可已使用table,但是自己用flex布局后面更容易增删改查其他功能 <div class="deliverySetting-table"><div class="table-head"><div class="selection"><el-checkbox :indeterminate="indeterminate" v-model="ische...
需要达到的目的: ajax()异步请求后台时,需要传入表格里复选框选中的id值 注意:在渲染form on 方法的done里面加入 done:function(res){table_data=res.data;} 将复选框选中的值的id加入数组中,然后传递到后台作为ids参数//自定义数组var table_data=new Array();var ids =new Array();table.on(checkbox(push_port_table), function(obj){if(obj.checked==true){if(obj.type==one){ids.push(obj.data.id);}else{for(var i=0;i<t...
如下:<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="../../../static/js/css/layui.css" rel="external nofollow" media="all"> <link rel="stylesheet" type="text/css" href="../../../static/css/index-gb.css" rel="external nofollow" media="all"> <link rel="stylesheet" href="http://at.alicdn.com/t/font_563459_gq4dpdw2k61xajor.css...
将复选框的代码原封不动地粘上后居然不显示 需要加入下列代码,监听form,才会显示控件 <script>layui.use(form, function () {var form = layui.form;}); </script>tab也是一样的原理,显示tab需要加上 <script>// tab控件必须有下面的代码,才可以切换layui.use(element, function () {var element = layui.element;//一些事件监听element.on(tab(demo), function (data) {console.log(data);});}); </script>以上这篇解决layui ...
在项目中发现layui数据表格勾选复选框checkbox的时候,转到新的一页勾选,上一次的勾选不会选中,即没有记忆功能。导致跟后台交互传递参数不全问题。 为了解决此问题,我们可以借助缓存,每勾选一个,保存到缓存变量数组中,取消勾选的时候,删除缓存的对应项。 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ page import="com.jfinal.kit.PropKit" %> <%@ page import="com.jfina...
应用场景: 我们应该经常见到系统中出现列表,会有一个对列表数据的操作(如删除, 修改,查看等)。我们可以在每个列表项后面加一个删除按钮,把列表项的相关参数(如 id)post到后台进行删除。当然如果你每次只要删除一两条数据这样子做并没有什么问题,但是如果你需要一次性删 除100条,你还去一条 条的删除吗?每一次删除10条会不会更好些呢? 好了,接下来。我们就使用jQuery解决这个问题。 首先,假设我们需要删除5个列表项。...
应用场景:在进行多选的时候一般默认显示第一个。 实现方法:纯vue实现 例子: <span v-for="(one,index) in site"><input type="checkbox" :checked="index == 0" style="vertical-align: middle;"><label>{{one.name}}</label></span>//:checked="index == 0"为索引为0的,即为第一个复选框添加属性。 拓展:默认被选中的复选框,只需要index指定即可。 以上这篇基于vue v-for 循环复选框-默认勾选第一个的实现方法就是小编分享给...
实例如下所示: <!DOCTYPE HTML> <html> <head><title></title> </head> <body> <ul><li><input type="checkbox" name="ss" onclick="choose(this)">1</li><li><input type="checkbox" name="ss" onclick="choose(this)">2</li><li><input type="checkbox" name="ss" onclick="choose(this)">3</li><li><input type="checkbox" name="ss" onclick="choose(this)">4</li><li><input type="checkbox" name="ss" onclick="choose(this...
一、checkbox选择 在jQuery中,选中checkbox通用的两种方式: $("#cb1").attr("checked","checked"); $("#cb1").attr("checked",true);对应的jQuery函数,主要完成三个功能: 1、第一个复选框选中或取消选中,则下面的复选框为全选或取消全选; 2、当下面的复选框全部选中时,则将第一个复选框设置为选中,当下面的复选框中有一个没有被选中时,则第一个复选框取消选中; 3、将下面的复选框的id值传递给Controller层,组成id数组,...
anime.js anime.js是一个灵活的轻型JavaScript动画库。 它与CSS,个别变换,SVG,DOM属性和JS对象。 特征 具体的动画参数 具体目标值 多个定时值 播放控制 运动路径在网页或者是APP的开发中,动画运用得当可以起到锦上添花的作用。正确使用动画,不但可以有助于用户理解交互的作用,还可以大大提高网页应用的魅力和使用体验。并且在现在的网页开发中,动画已经成为了一个设计的标准,变得越来越重要。特别是在一些和用户交互的地...
首先是页面上:<div class="row cl"><label class="form-label col-xs-4 col-sm-3" style="width: 20%"><span class="c-red">*</span>是否存在促销活动:</label> <div class="formControls col-xs-8 col-sm-9 skin-minimal"> <div class="check-box"> <input type="checkbox" value="1" id="isHaveActive" > <label for="isHaveActive"> </label> </div> </div> </div><div id="active" name="active" style="display:none;"><div...
简单介绍 jquery.sumoselect是一款跨设备、跨浏览器的jQuery下拉列表框插件。该jQuery下拉列表框插件可以单选,也可以多选。它的样式可以通过CSS文件来自定义。它的最大特点是可以跨设备使用,所有设备上功能都是一致的。 该jQuery下拉列表框插件的特点有: 可以进行单选,也可以进行多选。可以通过CSS文件来自定义样式。支持绝大多数的设备。根据设备智能渲染。在Android、IOS、Windows和其它设备上会自动渲染出该设备原生样式的下...