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.rhkb.cn/news/74927.html

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

相关文章

C++类与对象(上)

目录 类的定义类的访问限定符类的实例化类对象大小和储存方式this指针 C语言是面向过程的&#xff0c;关注的是过程&#xff0c;分析出求解问题的步骤&#xff0c;通过函数调用逐步解决问题。 C是基于面向对象的&#xff0c;关注的是对象&#xff0c;将一件事情拆分成不同的对象…

WSL2安装CentOS7和CentOS8

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、下载ZIP包&#xff1f;二、安装1.打开Windows子系统支持2.安装到指定位置3.管理虚拟机4.配置虚拟机1.配置国内源2.安装软件3.安装第三方源 5.配置用户1.创建…

【ASP.NET MVC】数据到客户端(7)

前文ViewBag数据在服务端动态生成页面&#xff0c;也可以传到客户端浏览器供JS使用。 一、数据从控制器到客户端 前文介绍&#xff0c;动态生成页面时&#xff0c;控制器的数据 并没有传递到 客户端&#xff0c;而是给自己来用&#xff0c;生成View 再利用http传递到客户端浏…

神经概率语言模型

本文主要参考《A Neural Probabilistic Language Model》这是一篇很重要的语言模型论文,发表于2003年。主要贡献如下: 提出了一种基于神经网络的语言模型&#xff0c;是较早将神经网络应用于语言模型领域的工作之一&#xff0c;具有里程碑意义。采用神经网络模型预测下一个单词…

Linux环境下VS code的python与C++调试环境的安装

Linux环境下VS code的python与C调试环境的安装 文章目录 Linux环境下VS code的python与C调试环境的安装前言一、云服务器的环境二、VS code相关信息三、python 开发环境配置四、C开发环境配置1.测试main.cpp2.进行debug3.进行debug程序4.运行main.cpp程序步骤 前言 最近写的 C&…

Meta AI研究团队新AI模型: Llama 2 大语言模型

Llama是Facebook Research团队开发的基础语言模型集&#xff0c;旨在提供广泛的语言理解能力。它基于转换器架构&#xff0c;参数范围从7B到65B。通过使用Llama模型&#xff0c;研究人员和开发人员可以构建更先进的自然语言处理系统。您可以在GitHub上找到相关的代码和资源&…

【BASH】回顾与知识点梳理(二)

【BASH】回顾与知识点梳理 二 二. Shell 的变量功能2.1 什么是变量&#xff1f;2.2 变量的取用与设定: echo, 变量设定规则: set/unset2.3 环境变量的功能用 set 观察所有变量 (含环境变量与自定义变量)export&#xff1a; 自定义变量转成环境变量那如何将环境变量转成自定义变…

【Spring Cloud 五】OpenFeign负载均衡

这里写目录标题 系列文章目录背景一、OpenFeign是什么Feign是什么Feign的局限性 OpenFeign是什么 二、为什么要有OpenFeign三、如何使用OpenFeign服务提供者order-servicepom文件yml配置文件启动类实体ParamController 服务消费者user-servicepom文件yml配置文件启动类接口类Us…

怎么维护自己的电脑?

方向一&#xff1a;我的电脑介绍 我使用的是一台来自知名品牌的笔记本电脑。它具有高性能的核心配置&#xff0c;如快速处理器、大容量内存和高性能显卡&#xff0c;以及宽敞的存储空间。我选择这台电脑主要是因为它的出色性能和可靠性&#xff0c;能够满足我在学习和工作中的…

Bean的实例化方法

目录 1.工厂模式通常有三种形态&#xff1a; 2.简单工厂 2.1 静态工厂 2.1通过factory-bean实例化 2.3通过FactoryBean接口实例化 3.测试 关于容器的使用 3.1获得spring文件方式 3.2getBean方式 4.关闭容器 1.工厂模式通常有三种&#xff1a; 第一种&#xff1a;简单工…

(杭电多校)2023“钉耙编程”中国大学生算法设计超级联赛(5)

1001 Typhoon 计算几何 对于每一个避难点,计算其到所有线段的距离,取min即可 AC代码&#xff1a; #include<iostream> #include<algorithm> #include<cstring> #include<vector> #include<deque> #include<cmath> #include<cstdio&…

【Linux命令200例】whereis用于搜索以及定位二进制文件

&#x1f3c6;作者简介&#xff0c;黑夜开发者&#xff0c;全栈领域新星创作者✌&#xff0c;阿里云社区专家博主&#xff0c;2023年6月csdn上海赛道top4。 &#x1f3c6;本文已收录于专栏&#xff1a;Linux命令大全。 &#x1f3c6;本专栏我们会通过具体的系统的命令讲解加上鲜…

nexus迁移

数据和配置迁移 打包两个目录&#xff0c;配置nexus-2.13.0-01和数据sonatype-work 数据量大可以split分割之后迁移再合并 大概看下文件目录 [roottest nexus]# tree -L 3 . ├── nexus-2.13.0-01 │ ├── bin │ │ ├── jsw │ │ ├── nexus │ │ …

selenium 遇到更新chorme驱动

打开浏览器,在地址栏输入chrome://version/便可以查看到谷歌当前的版本号 谷歌浏览器驱动的下载网址 http://chromedriver.storage.googleapis.com/index.htmlhttp://chromedriver.storage.googleapis.com/index.html 解压后把chromedriver.exe 放到python安装的目录下&am…

谈一谈缓存穿透,击穿,雪崩

缓存穿透 缓存穿透是指在使用缓存系统时&#xff0c;频繁查询一个不存在于缓存中的数据&#xff0c;导致这个查询每次都要通过缓存层去查询数据源&#xff0c;无法从缓存中获得结果。这种情况下&#xff0c;大量的请求会直接穿透缓存层&#xff0c;直接访问数据源&#xff0c;…

电动自行车上架eBay的UL2849、16CFR1512测试标准

在奥运经济的带动下&#xff0c;今年以来运动自行车消费有较大幅度增长&#xff0c;其中高端消费者对进口自行车需求扩张&#xff0c;上半年竞赛型自行车进口量同比增长49.5%。另外&#xff0c;电助力自行车在国际市场也倍受追捧&#xff0c;国际自行车贸易总额的60%来自中国&a…

嵌入式入门教学——C51

一、前期准备 1、硬件设备 2、软件设备 二、预备知识 1、什么是单片机&#xff1f; 在一片集成电路芯片上集成微处理器、存储器、IO接口电路&#xff0c;从而构成了单芯片微型计算机&#xff0c;及单片机。STC89C52单片机&#xff1a; STC&#xff1a;公司89&#xff1a;所属…

【计算机网络】应用层协议 -- DNS协议

文章目录 1. DNS背景2. 域名简介3. 域名解析过程4. 使用dig查看DNS过程 1. DNS背景 DNS&#xff08;Domain Name System&#xff0c;域名系统&#xff09;协议&#xff0c;是一个用来将域名转化为IP地址的应用层协议。 TCP/IP当中通过IP地址和端口号的方式&#xff0c;来确定…

调试正在运行的程序(Keil)

大家好&#xff0c;我是惊觉。接上一篇调试正在运行的程序(STM32CubeIDE)&#xff0c;今天Keil的实现方法。调试正在运行的程序&#xff0c;属于附着调试&#xff0c;在启动调试器时不会重置单片机的运行状态&#xff0c;从而可以定位死机等问题。没看过上一篇的同学&#xff0…

SystemC的调度器

文章目录 前言调度器初始化evaluatewait updatenotify delta notificationtime notification仿真结束 前言 SystemC是基于C的库&#xff0c;主要用来对 IC 进行功能建模和性能建模。有时也被用来当做 RTL (register transfer level) 级的升级版 HLS(High Level synthesis) 直接…