easyui实用点
1.下拉框（input框只能选不能手动输入编辑）
data-options="editable:false"//不可编辑
<td style="padding-left: 0.5%">
<input id="isHire" name="isHire" class="easyui-combobox"
style="width: 99.5%;height: 80%;"
data-options="valueField: 'value',editable:false, textField: 'text', panelHeight:'auto', value:'1',
data: [{ value: '1', text: '是' },
{ value: '2', text: '否' }],
onChange: onIsHireChange">
</td>
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 });
}
}
3.第一个输入之后 第二个禁用
function onIsHireChange(newValue, oldValue) {//是否可出租
var canHireSpace = $('#canHireSpace');
var hireNature = $('#hireNature');
if (newValue === '2') {//否
canHireSpace.numberbox('disable').numberbox('setValue', '');//可出租面积变成不可以用
hireNature.combobox('disable').combobox('setValue', '');//出租性质下拉框不可用
} else {
canHireSpace.numberbox('enable').numberbox('setValue', '');
hireNature.combobox('enable');
}
}
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 '<div οnclick="iconClick(' + index + ')"> <i class="layui-icon" style="font-size: 24px;color: #3399cc"></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>
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设置选中
//上传文件的 input框中设置 值注意是 setText setValue没用的
$('#fileUpload').textbox('setText', row.lssuesBody);
13.按钮，输入框变成禁用 并且不置灰
//按钮变成禁用的状态 人员选择框
var button = $('#discussionName').next().find('.textbox-button').addClass('disabled');
button.off('click').on('click', function(e) {
e.preventDefault(); // 阻止默认的点击事件
return false; // 阻止事件冒泡
});
// 将所有输入框设置为只读
$('#discussionForm input').prop('readonly', true);
//日期框变成只读
$('#suggestDate').datebox('readonly', true);
//下拉框变只读
$('#meetingUnit').combobox('readonly', true);
14.对搜索按钮 点击搜索
<div id="tool">
<input id="searchUser" prompt="请输入查询内容" style="width:300px" class="easyui- textbox">
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-search"
onclick="searchUser()">搜索</a>
</div>
function searchUser() {
// 获取输入框的值
var searchInput = $('#searchUser');
var searchValue = searchInput.textbox('getValue');
$('#edg').datagrid('load', {
search: searchValue//携带参数 查询
});
}
15.表单 tr td设置宽度无效
<colgroup>
每个元素都通过style属性定义了宽度样式 该表格应该有三列，并且每列的宽度分别为15%、35%和15%。
<col style="width: 15%;" />
<col style="width: 35%;" />
<col style="width: 15%;" />
</colgroup>
16.人员选择框
<td style="padding-left: 0.5%">
<input id="certificateNumber" name="certificateNumber" class="easyui-textbox" style="width: 99.5%;height: 80%;"
data-options="required: true, missingMessage: '请输入产证号', editable: false">
</td>
<div id="certificateNumberProbox" class="easyui-dialog" closed="true">//弹窗
</div>
$('#certificateNumber').textbox({
buttonAction: "right",
buttonText: "···",
onClickButton: function () {
$("#certificateNumberProbox").dialog({
width: 700,
height: 400,
closed: false,
cache: false,
modal: true,
collapsible: true,
minimizable: true,
maximizable: true,
title: '请选择产证',
draggable: false,
buttons: [{
text: '确认',
iconCls: 'icon-ok',
handler: function () {
// 确认按钮的点击事件处理逻辑
var row = $('#edg').datagrid('getSelected');
$("#certificateNumber").textbox("setValue", row.certificateNumber);
$("#certificateNumberProbox").dialog('close'); // 关闭对话框
}
}, {
text: '取消',
iconCls: 'icon-cancel',
handler: function () {
// 取消按钮的点击事件处理逻辑
$("#certificateNumberProbox").dialog('close'); // 关闭对话框
}
}],
onOpen: function () {
$('#datagrid').datagrid('reload'); // 重新加载数据
$(this).dialog('center'); // 将对话框居中显示
}
});
$('#certificateNumberProbox').dialog('open').dialog('refresh', ctx + "/test4");//弹出的页面
}
});
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
