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")
@ResponseBody
public 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 '+ index + ')"> ';
}
},
{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 '+ value + '">' + value + '';
}
}
]], 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设置选中