easyui实用点

easyui实用点

1.下拉框(input框只能选不能手动输入编辑)

data-options="editable:false"//不可编辑

2.日期框,下拉框,文本框等class

class="easyui-datebox"//不带时分秒
class="easyui-datetimebox"//带时分秒
class="easyui-combobox"//下拉框
class="easyui-textbox"//文本框

3.第一个输入框填写之后第二个设置成必填

1.输入联系人之后 联系电话变成必填

注意:onChange的方法要写到data-options=“onChange:onContactsChange”

 <tr><td class="tdTitle">联系人</td><td style="padding-left: 0.5%"><input class="easyui-textbox" name="contacts" style="width: 99%" data-options="onChange:onContactsChange" /></td><td class="tdTitle">联系电话</td><td style="padding-left: 0.5%"><input class="easyui-textbox" name="phone" id="phoneInput" style="width: 99%" data-options="validType:'mobile'" /></td></tr>

2.onContactsChange()方法

function onContactsChange() {var contactsInput = $('input[name="contacts"]');var phoneInput = $('#phoneInput');if (contactsInput.val().trim() !== '') {phoneInput.textbox('options').required = true;phoneInput.textbox('textbox').validatebox({ required: true, validType: 'mobile' });} else {phoneInput.textbox('options').required = false;phoneInput.textbox('textbox').validatebox({ required: false });}
}

4.是否必填

data-options="required:true"//普通input框
data-options="multiline:true"//文本框中的必填
missingMessage:'请填写名称'//必填之后的提示语

5.将数据回填到form表中

 $('#customerForm').form('load', row);

6.双击查看详情

  function iconClick(index) {//获取指定行的数据,并将其保存到 row 变量中。点击哪一行的数据var row = $('#datagrid').datagrid('getRows')[index];$('#dialogContainer').dialog({//EasyUI 对话框// title: '客商信息详情',href: '${ctx}/test15',//引入页面split: false,//对话框是否显示分割线closed: false,//对话框是否处于关闭状态cache: false,//是否缓存对话框的内容closable: false,//表示对话框是否可以被关闭title: '',//将对话框标题头隐藏draggable: false,//用于控制对话框是否可以拖动。fit: true, // 将对话框铺满整个屏幕onLoad: function () { // 将父节点的分类编码设置到文本框中$('#customerForm').form('load', row);//加载数据回写到表单中$('#customerForm input').prop('readonly', true); //将所有输入框变只读$('#foundTime').datebox('readonly', true);$('#notes').textbox('readonly', true);$('#submitFormBtn').hide(); // 隐藏保存和返回按钮$('#meetName').css('margin-top', '6%'); // 将表格的上边距设置为20px$.ajax({//子表信息url: ctx + "/conPayment/selectAll?id=" + row.customerListId,type: "get",success: function (data) {if (data) {// 将 data 的值动态设置到 addRow() 函数中的输入框中addRowInfo(data);// 将所有输入框设置为只读$('#accountTable input').prop('readonly', true);}}});// $('#form-buttons').hide(); // 隐藏保存和返回按钮}});$("#dialogContainer").dialog('center');//将对话框居中显示。}

7.获取子表的输入内容 并且存成list

1.前端表单存

function selectList() {var list = [];// 定义一个列表,用于保存输入框的值$.each($("#accountTable tbody tr"), function (index, item) {list[index] = {paymentName: $(this).find("[name=paymentName]").val(),bankAccount: $(this).find("[name=bankAccount]").val(),bankName: $(this).find("[name=bankName]").val(),paymentInfoId: $(this).find("[name=paymentInfoId]").val()}});return JSON.stringify(list);
}

2.前端和主表一起提交

 $('#customerForm').form('submit', {url: ctx + "/conCustomerList/customerListSave",onSubmit: function (param) {param.jsonStr = selectList();//带子表数据一起提交到后台},success: function (result) {if (result) {layer.msg('操作成功', {icon: 1,time: 1500,offset: 't',area: '200px'}, function () {$('#customerForm').form('clear');$('#dialogContainer').dialog('close');$('#datagrid').datagrid('reload');});} else {layer.msg('操作失败', {icon: 2,time: 1500,offset: 't',anim: 6,area: '200px'});}}});

3.后台拿到数据

    /*** 正常提交 添加or 保存** @param entity* @return*/@RequestMapping(value = "/customerListSave")@ResponseBodypublic JsonMsg meetSave(ConCustomerList entity, HttpServletRequest request) {entity.setIsUse("Y");String jsonStr = request.getParameter("jsonStr");conCustomerListService.customerListSave(entity, jsonStr);return new JsonMsg(true, "操作成功", null);}

4.对拿到的数据 进行反序列化 存成实体类

public void customerListSave(ConCustomerList entity, String jsonStr) {conCustomerListDao.save(entity);//需要hutool包List<PaymentInfo> lists = JSONUtil.toList(jsonStr, PaymentInfo.class);for (PaymentInfo list : lists) {list.setIsUse("Y");list.setCustomerListId(entity.getCustomerListId());}conPaymentInfoDao.saveAll(lists);}

8.数据列表

$('#datagrid').datagrid({url: ctx + "/conCustomerList/selectPageAll?id=" + nodeId + "&search=" + matterName,method: 'get',pageList: [20, 30, 40],pageSize: 20,pagination: true,singleSelect: true,toolbar: '#toolbar',toolbarAlign: 'right',header: "#toolHeader",fit: true, // 将表格大小适应父容器的大小width: 1500, // 设置表格的宽度scrollbarSize: 20, // 设置滚动条的大小scrollbarWidth: 20, // 设置滚动条的宽度frozenColumns: [[// 其他固定的列定义{field: 'id', title: '序号', width: 50, align: 'center', formatter: function (value, row, index) {// 自增序号的 formatter 函数var pageSize = $('#datagrid').datagrid('options').pageSize;return (index + 1) + (pageSize * ($('#datagrid').datagrid('options').pageNumber - 1));}},{field: 'opt', title: '明细', width: 50, align: 'center',formatter: function (value, row, index) {return '<div οnclick="iconClick(' + index + ')">  <i class="layui-icon" style="font-size: 24px;color: #3399cc">&#xe63c;</i></div>';}},{field: 'appellation', title: '单位名称/姓名', align: 'center', width: 150}]],columns: [[{field: 'unitCode',title: '统一单位代码/身份证号码',align: 'center',width: 180,formatter: function (value, row, index) {if (value && value.length == 18) {return value.substr(0, 6) + '******' + value.substr(12, 6);} else {return value;}}},{field: 'registerPlace', title: '注册地', align: 'center', width: 120},{field: 'contacts', title: '联系人', align: 'center', width: 120},{field: 'phone', title: '联系电话', align: 'left', width: 120},{field: 'customerCode', title: '客商编号', align: 'center', width: 120},{field: 'bankAccount',title: '银行行号',align: 'left',width: 400,formatter: function (value, row, index) {return '<span title="' + value + '">' + value + '</span>';}}]], onDblClickRow: function (rowIndex, rowData) {// 双击行事件处理逻辑iconClick(rowIndex);}});

9.校验表单是否正确

1.电话号码、身份证号等是否正确

输入框中加入data-options=“validType:‘mobile’”

   <td class="tdTitle">联系电话</td><td style="padding-left: 0.5%"><input class="easyui-textbox" name="phone" id="phoneInput" style="width: 99%" data-options="validType:'mobile'" /></td>xxxxxxxxxx data-options="validType:'mobile'"   <td class="tdTitle">联系电话</td>                <td style="padding-left: 0.5%">                    <input class="easyui-textbox" name="phone" id="phoneInput" style="width: 99%" data-options="validType:'mobile'" />                </td>

2.js中

$.extend($.fn.validatebox.defaults.rules, {mobile: {validator: function(value) {// 判断手机号格式是否正确return /^1[3-9]\d{9}$/.test(value);},message: '请输入正确的手机号码'}
});

10.下拉框设置默认值(是否)

<tr><td style=text-align:right><label>是否内部单位:</label></td><td><input id="isInternalUnit" name="isInternalUnit" style="width: 280px" 			class="easyui-combobox"data-options="editable:false,value:'2',//默认是否valueField:'value',textField:'text',panelHeight:'auto',//适应宽度data:[{value:'1',text:'是'},{value:'2',text:'否'},]"></td>
</tr>

11.想统计一样 单独单开一个 小窗口(人员选择框 也是同理)

在这里插入图片描述
在这里插入图片描述

1.前端选择有三个小点的按钮

<td><label>决策程序:</label></td><td><input class="easyui-textbox" style="width: 100%" id="decisionPro"><input id="decisionProId" name="decisionPro" type="hidden" class="easyui-textbox"/></td>

2.盒子

<div id="decisionProbox" class="easyui-dialog" closed="true"><div id="decisiondataGrid"></div><div id="adddecisiontools"><a href="#" class="easyui-linkbutton" style="height: 23px"onclick="chooseSave()">确定</a><a href="#" class="easyui-linkbutton" style="height: 23px"onclick="cancelSave()">取消</a></div>
</div><div id="toolHeader2" class="tools"><input id="searchUserName" prompt="请选择人员名称" style="width:260px" class="easyui-textbox"><a href="#" class="easyui-linkbutton" id="searchBtn" iconCls="icon-search" onclick="searchName()">查询</a>
</div>

3.js中 点击三个点按钮触发

$('#decisionPro').textbox({required: true,buttonAction: "right",buttonText: "···",onClickButton: function () {$("#decisionProbox").dialog({title: "会议类型选择  ",fid:true,maximize: true,cache: false,buttons: "#adddecisiontools",modal: true,closed: false,onOpen: function () {$('#decisiondataGrid').datagrid('reload'); // 重新加载数据$(this).dialog('center'); // 将对话框居中显示},onClose: function () {// 获取选中行并取消勾选var rows = $('#decisiondataGrid').datagrid('getSelections');$.each(rows, function (i, row) {var index = $('#decisiondataGrid').datagrid('getRowIndex', row);$('#decisiondataGrid').datagrid('uncheckRow', index);});// 根据排序字段对选中的行进行排序rows.sort(function (a, b) {return a.sort - b.sort;});// 将排序后的数据设置回表格中$.each(rows, function (i, row) {var index = $('#decisiondataGrid').datagrid('getRowIndex', row);$('#decisiondataGrid').datagrid('updateRow', {index: index,row: {sort: row.sort  // 只修改排序字段的值,不修改名称}});});}});}
});

4.数据加载

var ed;
$('#decisiondataGrid').datagrid({toolbar: "#toolHeader2",url: ctx + "/meetUser/findAll",method: 'get',fitColumns: true,pageList: [5, 10, 15],pagesize: 5,pagination: true,width: 700,height: 250,singleSelect: false,onSelectAll:function (rows){$.each(rows,function (index,value) {$('#decisiondataGrid').datagrid('beginEdit',index);})},onUnselectAll: function () {var rows = $('#decisiondataGrid').datagrid('getRows');$.each(rows, function (index, row) {$('#decisiondataGrid').datagrid('endEdit', index);});$('#decisiondataGrid').datagrid('reload'); // 刷新数据表格},onClickRow: function(index, row) {// 检查是否单击了勾选框var ck = $(this).datagrid('getChecked');var isCheck = false;for (var i = 0; i < ck.length; i++) {if (ck[i].id === row.id) {isCheck = true;break;}}// 如果单击了勾选框,则开始编辑该行if (isCheck) {$('#decisiondataGrid').datagrid('beginEdit', index);ed=$(this).datagrid('getEditor', {index: index, field: 'sort'});}else{$('#decisiondataGrid').datagrid('reload'); // 刷新数据表格}},columns: [[{field: 'id', title: '序号', width: 20, align: 'center', formatter: function (value, row, index) {// 自增序号的 formatter 函数var pageSize = $('#decisiondataGrid').datagrid('options').pageSize;return (index + 1) + (pageSize * ($('#decisiondataGrid').datagrid('options').pageNumber - 1));}},{field: 'checked', title: '勾选框', checkbox: 'multiple'},{field: 'meetingName', title: '会议类型名称', width: 60, align: 'center', halign: 'center'},{field: 'sort', title: '排序', width: 35, align: 'center', halign: 'center',editor: {type: 'numberbox',options: {required: true,precision: 0}}},{field: 'meetingId', title: '会议类型编号', width: 0, hidden: true}]]
});

12.设置值

  $('#endTime').textbox('setValue', i.endTime);//文本框设置值$("input[name='state'][value='1']").prop("checked", true);//单选框通过name设置选中

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/18243.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

idea调节文字大小、日志颜色、git改动信息

idea调节菜单栏文字大小&#xff1a; 调节代码文字大小&#xff1a; 按住ctrl滚动滑轮可以调节代码文字大小&#xff1a; 单击文件即可在主窗口上打开显示&#xff1a; idea在控制台对不同级别的日志打印不同颜色 &#xff1a; “grep console”插件 点击某一行的时候&#x…

关于会议OA需求分析与开发功能设计

前言&#xff1a;现如今&#xff0c;企业在会议管理方面对OA系统的需求越来越高。因为会议是企业内部沟通和协作的重要环节&#xff0c;一个高效的会议管理系统可以帮助企业提升会议效率、降低成本&#xff0c;并且提高内部信息共享的效果。 目录 一&#xff0c;以下是OA系统在…

[threejs]相机与坐标

搞清相机和坐标的关系在threejs初期很重要&#xff0c;否则有可能会出现写了代码&#xff0c;运行时一片漆黑的现象&#xff0c;这种情况就有可能是因为你相机没弄对。 先来看一下threejs中的坐标(世界坐标) 坐标轴好理解&#xff0c;大家只需要知道在three中不同颜色代表的轴…

ARM单片机中断处理过程解析

前言 中断&#xff0c;在单片机开发中再常见不过了。当然对于中断的原理和执行流程都了然于胸&#xff0c;那么对于ARM单片机中断的具体处理行为&#xff0c;你真的搞清楚了吗&#xff1f; 今天来简单聊一聊&#xff0c;ARM单片机中断处理过程中的具体行为是什么样的&#xf…

一张图像相当于 16×16 个单词:用于大规模图像识别的 Transformers(视觉 Transformers)

一张图片值多少字? 一张图片胜过千言万语?无法用言语完整地描述一幅图画。但论文告诉我们一张图像相当于 1616 个单词。在这篇博客中,我将解释使用 Transformer 进行图像识别。这是一篇非常有趣的论文, 这篇论文有什么特别之处? 它很特别,因为这里我们不会使用任何卷积网…

vite+typescript项目 :找不到模块“./***.vue”或其相应的类型声明——解决方案

vue3ts报错&#xff1a; 找不到模块“./App.vue”或其相应的类型声明。ts(2307) 解决方法&#xff1a; 1、在src文件夹找到 vite-env.d.ts 加入以下代码&#xff1a; declare module *.vue {import type { DefineComponent } from vueconst vueComponent: DefineComponent<…

django使用ztree实现树状结构效果,子节点实现动态加载(l懒加载)

一、实现的效果 由于最近项目中需要实现树状结构的效果,考虑到ztree这个组件大家用的比较多,因此打算在django项目中集成ztree来实现树状的效果。最终实现的示例效果如下: 点击父节点,如果有子节点,则从后台动态请求数据,然后显示出子节点的数据。 二、实现思路 …

AndroidBanner - ViewPager

解决banner 不可见依旧轮播的问题 思考一下&#xff1a;什么时候可以轮播&#xff0c;什么时候不可以轮播 当Banner添加到屏幕上&#xff0c;且对用户可见的时候&#xff0c;可以开始轮播 当Banner从屏幕上移除&#xff0c;或者Banner不可见的时候&#xff0c;可以停止轮播 当…

P2404 自然数的拆分问题

题目 思路 最简单的dfs题之一 只需要一点点小优化 代码 #include<bits/stdc.h> using namespace std; const int maxn55; int n; int ans[maxn],s; void print(int tot) { for(int i1;i<tot-1;i) cout<<ans[i]<<""; cout<<ans[tot-1]&…

微信小程序,商城底部工具栏的实现

效果演示&#xff1a; 前提条件&#xff1a; 去阿里云矢量图标&#xff0c;下载8个图标&#xff0c;四个黑&#xff0c;四个红&#xff0c;如图&#xff1a; 新建文件夹icons&#xff0c;把图标放到该文件夹&#xff0c;然后把该文件夹移动到该项目的文件夹里面。如图所示 app…

jmeter之接口测试(http接口测试)

基础知识储备 一、了解jmeter接口测试请求接口的原理 客户端--发送一个请求动作--服务器响应--返回客户端 客户端--发送一个请求动作--jmeter代理服务器---服务器--jmeter代理服务器--服务器 二、了解基础接口知识&#xff1a; 1、什么是接口&#xff1a;前端与后台之间的…

动手学深度学习(一)预备知识

目录 一、数据操作 1. N维数组样例 2. 访问元素 3. 基础函数 &#xff08;1&#xff09; 创建一个行向量 &#xff08;2&#xff09;通过张量的shape属性来访问张量的形状和元素总数 &#xff08;3&#xff09;reshape()函数 &#xff08;4&#xff09;创建全0、全1、…

CorelDraw怎么做立体字效果?CorelDraw制作漂亮的3d立体字教程

1、打开软件CorelDRAW 2019&#xff0c;用文本工具写上我们所需要的大标题。建议字体选用比较粗的适合做标题的字体。 2、给字填充颜色&#xff0c;此时填充的颜色就是以后立体字正面的颜色。我填充了红色&#xff0c;并加上了灰色的描边。 3、选中文本&#xff0c;单击界面左侧…

java 企业工程管理系统软件源码+Spring Cloud + Spring Boot +二次开发+ MybatisPlus + Redis

&#xfeff; Java版工程项目管理系统 Spring CloudSpring BootMybatisVueElementUI前后端分离 功能清单如下&#xff1a; 首页 工作台&#xff1a;待办工作、消息通知、预警信息&#xff0c;点击可进入相应的列表 项目进度图表&#xff1a;选择&#xff08;总体或单个&am…

Metric3D:Towards Zero-shot Metric 3D Prediction from A Single Image

参考代码&#xff1a;Metric3D 介绍 在如MiDas、LeReS这些文章中对于来源不同的深度数据集使用归一化深度作为学习目标&#xff0c;则在网络学习的过程中就天然失去了对真实深度和物体尺寸的度量能力。而这篇文章比较明确地指出了影响深度估计尺度变化大的因素就是焦距 f f f…

TypeC拓展设计方案|TypeC转HDMI设计方案|CS5261/CS5265芯片设计参数对比

集睿智远CS5261/CS5265都可以用于设计TypeC转HDMI方案&#xff0c;低成本TypeC扩展坞设计方案&#xff0c;而两者也有些差异&#xff1a;1.CS5261支持DP1.4输入&#xff0c;一个HDMI1.4输出&#xff0c;即HDMI输出为4K30HZ ;CS5265DP1.4到HDMI2.0转换芯片&#xff0c;即HDMI输出…

ansible安装lnmp(集中式)

文章目录 一、安装nginx二、安装mysql三、安装php测试&#xff1a; 一、安装nginx - name: the nginx playhosts: webserversremote_user: roottasks:- name: stop firewalld #关闭防火墙service: namefirewalld statestopped enabledno- name: selinux stopc…

Python元编程-装饰器介绍、使用

目录 一、Python元编程装饰器介绍 二、装饰器使用 1. 实现认证和授权功能 2.实现缓存功能 3.实现日志输出功能 三、附录 1. logging.basicConfig介绍 2. 精确到毫秒&#xff0c;打印时间 方法一&#xff1a;使用datetime 方法二&#xff1a;使用time 一、Python元编程…

C# 根据图片的EXIF自动调整图片方向

PropertyItems 代码 /// <summary>/// 根据图片exif调整方向/// </summary>/// <param name"img"></param>public void RotateImage(Bitmap img){var exif img.PropertyItems;byte orien 0;var item exif.Where(m > m.Id 274).ToArra…

关于综合能源智慧管理系统的架构及模式规划的研究

安科瑞 华楠 摘 要&#xff1a;探讨了国内外能源互联网的研究发展&#xff0c;分析了有关综合智慧能源管理系统的定位&#xff0c;以及系统的主要特点&#xff0c;研究了综合智慧能源管理系统的构架以及模式规划。 关键词&#xff1a;综合能源&#xff1b;智慧管理系统&#…