首页
学习
活动
专区
圈层
工具
发布

LayUI之旅-入门

-- 左侧导航区域(可配合layui已有的垂直导航) --> ... JS部分 // 配置tab实践在下面无法获取到菜单元素...(原样输出),这样有一个问题,就是用户不知道自己刚刚点击的是导航栏的哪一项,以及重复验证用户是否登录,这需要借助cookie和session来实现,最关键的问题在于点击后页面会有一次跳转,用户体验不太好...坑从何来,因为突然收到一个需求的变化,就是当点击按钮时,渲染的数据表格只是数据集中的一部分(因为数据确实有些多),要查看没一条信息对应的详细情况,需要在表格最右侧增加一列操作列,里面放的是按钮,点这个按钮的时候需要给弹窗出来...var data = obj.data; //获得当前行数据 var layEvent = obj.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值

3.1K20

bootstrap-suggest插件

(与背景警告色显示同步) 4、onShowDropdown:下拉菜单显示时触发 5、onHideDropdown:下拉菜单隐藏式触发 1.5 完整代码实现: 1、引入 jQuery、bootstrap.min.css...忽略大小写 hideOnSelect:true, //鼠标从列表单击选择了值时,是否隐藏选择列表 listAlign:'auto',...是否自动选择值 allowNoKeyword: TRUE, // 是否允许无关键字时请求数据 getDataMethod: 'firstByUrl', // 获取数据的方式...false, // 获取数据的方式 为 firstByUrl 时,是否延迟到有输入时才请求数据 ignorecase: false, // 前端搜索匹配时...', // ajax 搜索时显示的提示内容,当搜索时间较长时给出正在搜索的提示 hideOnSelect: false, // 鼠标从列表单击选择了值时,是否隐藏选择列表

11.8K40
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    layui数据表格checkbox设置部分不可选

    问题 在layui数据表格中设置了字段为type:checkbox 但是想要实现部分不显示,不可选的功能。 ? ? layui内置没有该功能,所以只能自己实现。...ids = []; $.each($("input[name=siam_one]:checked"), function (i, value) { ids[i] = $(this).attr("data-id..."); // 如果需要获取其他的值 需要在模板中把值放到属性中 然后这里就可以拿到了 }); 使用done函数禁用 这是网上的做法,但是有瑕疵,全选不可用,并且不可选状态和可选状态的复选框样式很接近,...-- 注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地的 --> layui.use(['table', 'jquery...layer'], function() { var table = layui.table; var $ = layui.jquery

    14.3K31

    我的python学习--第十四天(一)

    一、运维管理系统(基于Flask)回顾 1、权限控制   通过session实现权限控制,session是一个全局字典,当用户登录时,可以获取到用户的用户名,通过查找数据库获取用户的权限保存进session...中,在每次页面跳转时同过查询session中的权限实现权限管理。...2、base64和md5加密方式的区别  在用户添加和登录中使用到了md5加密,md5属于单向加密,是不可逆的,数据库密码保存的是加密后的字符串。...支持的原生js提示框,显示更优雅   datatables:一款jQuery表格插件,可以实现分页,即时搜索和排序   Validform:表单验证插件,对输入值进行简单验证   highcharts,...显示工单时,只需要根据工单的状态‘0’,‘1’为工单申请列表,‘2’,‘3’则为工单的历史列表 工单申请列表需通过申请时间倒序排序,同理,历史列表通过处理结束时间倒序排序,让列表一目了然 在工单处理时,

    71620

    如何使用 HTML、CSS 和 Vanilla JavaScript 以及本地存储创建待办事项应用程序

    在事件侦听器函数中,我们将从用户获取输入值,将其传递给函数addTask(),并将输入值设置为空字符串。...如果用户没有输入值,我们将返回:这将防止在用户没有输入任何值时向列表中添加空任务或执行不必要的操作 const taskBtn = document.querySelector(".add-btn"...id ( data-id = ${taskId}):这将允许我们在编辑或删除任务时检索 id。...最后,我们获取 li 元素的 data 属性值并将其存储在名为 的变量中taskId。我们在实现本地存储时会用到这个值 编辑任务 定义一个名为 的函数editTask()。...在这个函数中,我们想要执行与删除按钮相同的步骤:即: 获取所有编辑按钮 使用forEach()方法迭代并获取最接近的li元素 获取 data-id 属性 allTasks使用 id 在数组中查找任务

    88910

    JS DOM学习笔记

    document.getElementById("控件Id")来获取标签对象 8、事件:onclick(单击)、ondblclick(双击)、onkeydown(按键按下)、onkeypress(按下按键...‘右键菜单’时触发) 9、window.location对象: window.location.href = "*.html"; //重新导航到新页面,可以取值,也可以赋值     window.location.reload...document.createElement("input"); //创建一个input标签 btn.type = "button";//input标签类型为按钮 btn.value = "提交"; //设置按钮值...; 在FireFox中绑定事件的方法是addEventListener jQuery之类的框架进行了封装,解决了不同浏览器上Dom的不同 14、jQuery的ready和Dom的onload的区别:window.onload...只能注册一次,是在所有的Dom元素创建完毕、图片、CSS都加载完毕后才被触发;而jQuery的ready则是在Dom元素创建完毕后被触发,这样可以提高网页的响应速度 15、js打印一个对象的所有属性:

    4.8K40

    Jquery 使用技巧总结

    7、插件丰富,除了jQuery本身带有的一些特效外,可以通过插件实现更多功能,如表单验证、tab导航、拖放效果、表格排序、DataGrid,树形菜单、图像特效以及ajax上传等。...jQuery集合的某一项 对于获取的元素集合,获取其中的某一项(通过索引指定)可以使用eq或get(n)方法或者索引号获取,要注意,eq返回的是jquery对象,而get (n)和索引返回的是dom元素对象...对于jquery对象只能使用jquery的方法,而dom对象只能使用dom的方法,如要获取第三个元素的内容。...$("input").val("test"); //将表单输入框的value值设为test $("#msg").click(); //触发id为msg的元素的单击事件 $(...把一个数组中的项目(处理转换后)保存到到另一个新数组中,并返回生成的新数组。

    3.5K20

    干货 | 前端思维转变--从事件驱动到数据驱动

    “ 接触过jQuery的小伙伴们大概在切换到mvvm初总不习惯,需要进行开发思维的转换,从事件驱动的角度出发,到从数据驱动的角度出发,也是不小的挑战。...每一种控件有自己可以识别的事件,如窗体的加载、单击、双击等事件,编辑框(文本框)的文本改变事件,等等。 事件(event)是针对应用程序所发生的事情,并且应用程序需要对这种事情做出响应。...针对不同事件,编写不同的处理逻辑,包括获取事件状态/输入、计算并更新状态等。 根据计算后的数据状态,重新渲染页面。 通俗地说,事件驱动思维是从事件响应出发,来完成应用的设计和编程。...2.2.2数据驱动思维 转换到数据驱动思维后,我们在编程实现的过程中,更多的是思考数据的维护和处理,而无需过于考虑UI的变化和事件的监听。...这里需要更改id为3的name值): // 1).

    1.1K11

    前端思维转变--从事件驱动到数据驱动

    接触过 jQuery 的小伙伴们大概在切换到 mvvm 初总不习惯,需要进行开发思维的转换,从事件驱动的角度出发,到从数据驱动的角度出发,也是不小的挑战。...每一种控件有自己可以识别的事件,如窗体的加载、单击、双击等事件,编辑框(文本框)的文本改变事件,等等。事件(event)是针对应用程序所发生的事情,并且应用程序需要对这种事情做出响应。...针对不同事件,编写不同的处理逻辑,包括获取事件状态/输入、计算并更新状态等。根据计算后的数据状态,重新渲染页面。通俗地说,事件驱动思维是从事件响应出发,来完成应用的设计和编程。...数据驱动思维转换到数据驱动思维后,我们在编程实现的过程中,更多的是思考数据的维护和处理,而无需过于考虑 UI 的变化和事件的监听。...这里需要更改 id 为 3 的 name 值):// 1).

    36700

    UI标签库的话题:JEECG智能开发平台 BaseTag(样式表和JS标签的引入)

    JS插件类型 插件名 描写叙述 Jquery 引入版本号jquery-1.8.3 Easyui 引入版本号jquery.easyui.1.3.1及自己定义扩展JS DatePicker 引入版本号My97DatePicker4.8...Datagrid(数据表) 2.1.DataGrid父标签 2.1.1.演示样例 ...2.1.3.方法 方法名 传入參数 描写叙述 reloadTable 无 又一次载入数据 reload+name 无 又一次载入数据name是表格唯一标示 get+name+Selected field 获取选定行传入字段的值...getSelected field 获取选定行传入字段的值 get+name+Selections field 获取全部选定行传入字段的数组集合 name+search 无 运行查询前提是Column...事件 事件名 传出參数 描写叙述 onClickRow rowIndex,rowData 行单击事件 onDblClickRow rowIndex,rowData 行双击事件 onLoadSuccess

    5.1K20

    CodeWave系列:3.CodeWave 智能开发平台 页面布局及呈现

    login(登录页):开启权限管理后,需要登录账户时跳转的页面。 index(首页):登录应用后默认进入的页面。 dashboard(总览页):系统默认的页面模板。...页面事件主要有: 事件名 触发条件 其他说明 进入时 页面刚打开时 只能做一些数据处理,不能获取dom节点进行操作 进入后 页面节点挂载时 可进行数据处理,dom操作 更新时 页面更新时 可进行数据处理...,dom操作 离开时 页面跳转关闭后 可进行数据处理,dom操作,主要做一些数据清理操作 3.页面设计 3.1 导航 面包屑: 面包屑对于用户来说是一个方便的导航工具,能够帮助用户快速了解当前页面所在位置...数据表格通常用于以下场景: 当用户需要存储、组织和分析结构化数据时,数据表格可以清晰地展示出数据的所有相关属性。 具体常见场景说明请参见如何在表格中展示实体数据。...数据表格具备行和列结构,当用户需要查找或整理数据时,数据表格可以轻松地进行数据过滤和排序,整合符合要求的数据并展示在表格中。

    1.1K10

    前端思维转变--从事件驱动到数据驱动

    接触过jQuery的小伙伴们大概在切换到mvvm初总不习惯,需要进行开发思维的转换,从事件驱动的角度出发到从数据驱动的角度出发,也是不小的挑战。...每一种控件有自己可以识别的事件,如窗体的加载、单击、双击等事件,编辑框(文本框)的文本改变事件,等等。 事件(event)是针对应用程序所发生的事情,并且应用程序需要对这种事情做出响应。...3.针对不同事件,编写不同的处理逻辑,包括获取事件状态/输入、计算并更新状态等。 4.根据计算后的数据状态,重新渲染页面。 通俗地说,事件驱动思维是从事件响应出发,来完成应用的设计和编程。...数据驱动思维 转换到数据驱动思维后,我们在编程实现的过程中,更多的是思考数据的维护和处理,而无需过于考虑UI的变化和事件的监听。...这里需要更改id为3的name值): 12345678 // 1).

    2.3K10
    领券