
前端 UI 框架
EasyUI、Layui
旭东怪
这个作者很懒,什么都没留下…
展开
-
Layui select(下拉框)使用(动态渲染,更改选中值)
1 动态渲染HTML 代码:<form> <select id="select" > <option value="">--全部--</option> </select></form>JS代码:var ids=['1','2','3'];var names=['流域','河段','水系'];var select= document.getElementById('select'.原创 2020-11-17 19:22:03 · 25651 阅读 · 0 评论 -
Layui radio(单选按钮)的使用(动态渲染和更改选中值)
1 动态渲染HTML代码:<form> <input type="radio" name="bShow" value="1" title="是" /> <input type="radio" name="bShow" value="0" title="否" /></form>最终效果图 :注:动态渲染select标签时,需要将select标签置于form表单内。2 更改选中值$('[name=bShow]').原创 2020-11-17 19:37:37 · 11135 阅读 · 4 评论 -
Layui select(下拉框)绑定change事件
HMTL代码:<form> <select id='select1' lay-filter="select1"></form>JS 代码:layui.use(['layer', 'jquery', 'form'], function () { var layer = layui.layer, $ = layui.jquery, form = layui.form; form.on('select(原创 2020-11-18 20:33:03 · 15012 阅读 · 1 评论 -
LayUI upload上传组件上传文件的两种方式(手动上传、自动上传)
1 手动上传上传文件分为两步,第一步选择文件,第二步上传文件。HTML代码:<input type='button' id='selectFile' value='选择文件'><div id='fileDiv'></div><input type='button' id='uploadFile' value='上传文件'>JS代码:$(function(){ initUpload();});//初始化上传组件funct原创 2020-12-10 19:41:11 · 9362 阅读 · 3 评论 -
LayUI upload上传组件使用exts属性指定上传文件的后缀名,过滤掉其他格式的文件
1 HTML代码<input type='button' id='selectFile' value='选择文件'><div id='fileDiv'></div>2 JS代码$(function(){ initUpload();});//初始化上传组件function initUpload(){ layui.use(['upload'], function () { var upload = layui.uploa原创 2020-12-10 19:45:28 · 4910 阅读 · 2 评论 -
LayUI upload上传组件选择文件按钮点击无效,无法弹出文件选择对话框问题解决
问题描述:点击选择文件按钮无效,无法弹出文件选择对话框。问题解决:1、由于是在对话框中使用LayUI的上传组件,需要在对话框初始化完成之后再初始化文件按钮。//初始化对话框function initDialog(){ attachDialog = art.dialog({ left: '50%', top: '50%', width: 430, height: 200, fixed: true,原创 2020-12-10 19:53:17 · 6832 阅读 · 0 评论 -
EasyUI Numberbox 数字框使用(限制仅输入数字)
1 限制仅输入数字(HTML代码实现)<input type="text" id="text1" class="easyui-numberbox" value="100" data-options="min:0,precision:2">2 限制仅输入数字(JS代码实现)$('#text1').numberbox({ min:0, precision:2});注:precision代表小数位数,precision=0代表只能输入整数。...原创 2020-11-19 20:27:23 · 3409 阅读 · 0 评论 -
EasyUI combobox(组合框)绑定onChange事件
HTML代码:<input type='text' id='text1' />JS代码: $('#text1').combobox({ onChange:function(newValue,oldValue){ alert("这是更改之前的值:"+oldValue); alert("这是更改之后的值:"+newValue); }});注:文本框动态渲染成combobox(组合框)之后,不能直接给文本框添加onchange属性或原创 2020-11-19 21:04:01 · 2545 阅读 · 0 评论 -
EasyUI combobox(单选下拉框)绑定数据3种方式(动态数据绑定,本地数据绑定,select标签渲染)
1 动态数据绑定function BindListCode(codetype,isshowblank,strRequired){ $('#' + objId).combobox({ url: '/GetComboboxData.ashx?action=GetListCode&CodeType=' + codetype, valueField: 'Code', textField: 'CodeName', panelHe.原创 2020-11-20 20:49:22 · 3582 阅读 · 0 评论 -
EasyUI 解决Combobox绑定onChange事件后,setValue更改选中值无效问题
问题描述:标签元素使用combobox()绑定数据之后,又绑定了onChange事件后,结果使用setValue不能更改选中值问题分析:可能是因为使用combobox()绑定数据之后,先使用setValue更改选中值,再绑定onChange事件,使用顺序错误导致了setValue无效。问题解决:...原创 2020-11-25 19:30:50 · 3010 阅读 · 0 评论 -
EasyUI 同一组的radio单选按钮可以选择多个问题解决
1 问题描述效果图:HTML代码:<input class="easyui-radiobutton" name="paramt" data-toggle="topjui-radiobutton" value="1" label="男" checked="true" labelwidth="20px" /><input class="easyui-radiobutton" name="paramt" data-toggle="topjui-radiobutton" va.原创 2020-12-10 19:26:46 · 1922 阅读 · 1 评论 -
EasyUI combobox(多选下拉框)绑定数据2种方式(动态数据绑定,本地数据绑定)
1 多选下拉框动态数据绑定1.1 数据绑定function BindMultiListCode(objId,codetype){ $('#' + objId).combobox({ url: '/GetComboboxData.ashx?action=GetListCode&CodeType=' + codetype, valueField: 'Code', textField: 'CodeName', panelHe原创 2020-12-29 20:19:17 · 1799 阅读 · 0 评论 -
EasyUI combobox(多选下拉框)加载时设置默认值(设置默认选中值、设置默认选中前几项)
1 多选下拉框加载时设置默认选中值unction BindMultiListCode(objId,comboxData,values){ $('#' + objId).combobox({ data: comboxData, valueField: 'Code', textField: 'CodeName', panelHeight: 'auto', editable: false, showbla原创 2020-12-29 20:32:08 · 6496 阅读 · 0 评论 -
EasyUI combobox(单选下拉框)设置和获取选中值
1单选下拉框设置选中值使用combobox()的setValue来设置单选下拉框的选中值。$("#"+objId).combobox("setValue","1");2单选下拉框获取选中值2.1 getValue在使用combobox()进行数据绑定的情况下,使用combobox()的getValue来获取单选下拉框的选中值。$("#"+objId).combobox("getValue");2.2通过中间控件获取选中值在对select标签渲染的情况下,不能直接使用...原创 2021-01-02 19:54:41 · 9836 阅读 · 0 评论 -
EasyUI combobox(多选下拉框)设置和获取选中值
1多选下拉框设置选中值1.1 setValues+选中当前要选中行的复选框2多选下拉框获取选中值通过combobox()的getValues获取多个选中值//获取选中值,以字符串的形式返回function getValues(objId){ var valuesList=$("#"+objId).combobox("getValues"); var values=""; if(!valuesList||values.length<0){ ..原创 2021-01-03 19:36:04 · 7319 阅读 · 0 评论 -
EasyUI 实现复选框添加提示(title)
1 HTML代码<div id="checkboxDiv"> <input class="easyui-checkbox" name="是" value="1" label="是" labelwidth="65px" title="是" tooltip="是" /></div>2 JS代码$("#checkboxDiv .textbox-label").each(function () { $(this).attr("titl..原创 2021-01-13 19:24:19 · 1025 阅读 · 0 评论