TopJui 我踩的那些坑
TopJui 踩坑事项
这是一个前言。至于为什么用这个框架，也是无奈，遍寻度娘基本上没有什么文档是关于TopJui，所以一切你遇到没法解决没有前例可寻的坑，请上网找一下easyui的相关解决办法，如果还是找不到那你就换种方式吧！
1.表格渲染
<div id="rechageDatagrid-toolbar" class="topjui-toolbar" data-options=" grid:{ type:'datagrid', id:'rechageDatagrid' }" style="display:none">
<div data-toggle="topjui-layout" data-options="fit:true">
<div data-options="region:'center',iconCls:'icon-reload',title:'',split:true,border:false">
<table id="rechageDatagrid"></table>
</div>
</div>
</div>
注意事项：
请将最上面的div 包裹表格渲染以及查询功能的dom结构，这关系到你表格能不能渲染出来，有没有分页等
部分参数说明
region ：定义布局面板位置，可用的值有：north, south, east, west, center。
fit ：如果设置为true，布局组件将自适应父容器
//数据渲染
$('#rechageDatagrid').iDatagrid({
url:systemHost+"/recharge/priceDefined/pc/v1/page",
singleSelect: false,
checkOnSelect: true,
selectOnCheck: true,
fitColumns: true,
queryParams: {
speedType:2
},
columns: [[
{ field: 'province', title: '地区' , width: 80},
{ field: 'operator', title: '运营商' , width: 80},
{ field: '10', title: '10' , width: 80},
{ field: '20', title: '20' , width: 80},
{ field: '30', title: '30' , width: 80},
{ field: '50', title: '50' , width: 80},
{ field: '100', title: '100' , width: 100},
{ field: '200', title: '200' , width: 100},
{ field: '300', title: '300' , width: 100 },
{ field: '500', title: '500' , width: 100 },
{
field: 'operate',
title: '操作',
width: 100,
formatter: function (value,row,index) {
var htmlstr = '<button class="layui-btn layui-btn-xs" onclick="openEditDiag(\'' + JSON.stringify(row).replace(/\"/g,""") + '\')">编辑</button>';
htmlstr += '<button class="layui-btn layui-btn-xs layui-btn-danger" onclick="deleteRow(\'' + row.operator + '\',\'' +row.province+ '\')">删除</button>';
return htmlstr;
}
}
]],
onLoadSuccess:function(data){
if (!data) {
var body = $(this).data().datagrid.dc.body2;
body.find('table tbody').append('<tr><td colspan="12" width="' + body.width() + '" style="height: 35px; text-align: center;"><h1>暂无数据</h1></td></tr>');
}
}
});
需要注意事项
页面之间数据传输不能用对象进行传输，需要将对象转换成json,请参见操作里编辑按钮传输数据，JSON.stringify(row).replace(/"/g,""")，在此使用时请将json 在转换成对象进行数据渲染var recharge = JSON.parse(row);
部分参数说明
fitColumns： true列宽自适应
queryParams： 查询需要的参数
url： 表格渲染的数据
onLoadSuccess:表格数据加载成功后
2.弹出框渲染
<a id="" href="#" data-toggle="topjui-menubutton" data-options="iconCls:'icon-search', iconCls:'fa fa-plus', btnCls:'topjui-btn-green'" onclick="addSlowInfo()">新增</a>
topjui-menubutton :按钮
iconCls ： 按钮大小 类型
btnCls ：按钮颜色
//新增弹框
function addSlowInfo() {
$editDialog = $('<form id="rechageForm" ></form>');
$editDialog.dialog({
title:"增加慢充价格",
href:'addSlow.html',
closed: false,
cache: false,
height:600,
width:500,
modal: true,
buttons: [
{
text: '保存',
iconCls: 'fa fa-save',
btnCls: 'topjui-btn-blue',
handler: function () {
alert("212");
}
},
{
text: '关闭',
iconCls: 'fa fa-close',
btnCls: 'topjui-btn-red',
handler: function () {
$editDialog.dialog('close');
}
}
],
//当弹框关闭时
onClose: function () {
$(this).dialog('destroy');//销毁
},
//弹框加载后
onLoad: function () {
alert("212");
}
});
}
部分参数说明
buttons :弹框的按钮（确认按钮 取消按钮）
handler :按钮触发时的操作
href :弹框结构页面
modal ：定义是否将窗体显示为模式化窗口
onClose ：弹框关闭时触发
onLoad ：弹框加载后触发
find.dialog(‘close’)和find.dialog(‘destroy’)区别
使用close的方法来关闭dialog时，此dialog并不是完全消失，只是隐藏起来了而已。当另外一个dialog和这个dialog相同时，就会发生混乱。所以我们不适用close的方法来关闭dialog，使用destroy来销毁dialog，当使用destroy时，如果页面上显式定义了dialog的话，关闭后就永远都打不开了。所以我们不显式定义dialog，并且把保存页面和列表页面分开。
3.渲染出来的弹框样式（addSlow.html）只留了主要的dom结构方面阅读
<div class="topjui-fluid">
<fieldset>
<legend>基本信息</legend>
</fieldset>
<div class="topjui-row">
<div class="topjui-col-sm12">
<label class="topjui-form-label">地区</label>
<div class="topjui-input-block">
<input data-toggle="topjui-combobox" id="province" name="province" data-options="prompt:'请选择 ',
required:true,width:100,valueField:'id', textField:'text', panelHeight:'auto',onChange:function(){changeProvince()}">
</div>
</div>
</div>
<fieldset>
<legend>充值面额对应定价</legend>
</fieldset>
<div class="topjui-row">
<div class="topjui-col-sm12">
<label class="topjui-form-label">10 : </label>
<div class="topjui-input-block">
<input type="text" id="10" name="10" data-toggle="topjui-textbox" data-options="required:true,validType:'intOrFloat',width:100" >
</div>
</div>
</div>
<div class="topjui-row">
<div class="topjui-col-sm12">
<label class="topjui-form-label">20 : </label>
<div class="topjui-input-block">
<input type="text" id="20" name="20" data-toggle="topjui-textbox" data-options="required:true,validType:'intOrFloat',width:100" >
</div>
</div>
</div>
</div>
部分功能说明
data-toggle="topjui-combobox" 下垃列表
<input data-toggle="topjui-combobox" id="province" name="province" data-options="prompt:'请选择 ',
required:true,width:100,valueField:'id', textField:'text', panelHeight:'auto',onChange:function(){changeProvince()}">
required ：true是否必填
panelHeight ：下拉列表的高度 panelHeight:'auto'意思是高度自适应
data-toggle="topjui-textbox" 文本框
validType 文本框输入校验
验证规则是根据使用需求和验证类型属性来定义的，这些规则已经实现：
email：匹配E-Mail的正则表达式规则。
url：匹配URL的正则表达式规则。
cellphone：匹配手机号码的正则表达式规则。
telephone：匹配手机号或座机号的正则表达式规则。
length[0,100]：允许在x到x之间个字符。
minLength[6]：输入长度不能小于x个字符。
equals[’#pwd’]：输入内容必须与id为pwd的字段相同。
remote[‘http://…/action.do’,‘paramName’]：发送ajax请求需要验证的值，当成功时返回true。
自定义验证规则，需要重写$.fn.iValidatebox.defaults.rules中定义的验证器函数和无效消息。例如，定义一个输入是小数的自定义验证：
$.extend($.fn.validatebox.defaults.rules, {
intOrFloat: {// 验证整数或小数
validator: function (value) {
return /^\d+(\.\d+)?$/i.test(value);
},
message: '请输入正确的价格'
}
});
4.topJui设置值以及获取值
$('#province').iCombobox('setValue','安徽');//下垃框设置值
$("#province").iCombobox('readonly',true); //只读属性
$('#20').iTextbox('setValue','12'); //文本框设置值
$('#province').iCombobox('getValue'); ///下垃框获取值
$('#20').iTextbox('getValue'); //文本框获取值
$('#20').textbox({required:false});//取消必须输入验证
对于一些隐藏dom结构，设置disabled属性时需要注意通过TopJui渲染后的dom结构!
你写的结构
<div class="topjui-input-block">
<input type="text" id="10" name="10" data-toggle="topjui-textbox" data-options="required:true,validType:'intOrFloat',width:100" >
</div>
渲染出来的结构
<div class="topjui-input-block">
<input type="text" id="10" data-toggle="topjui-textbox" data-options="required:true,validType:'intOrFloat',width:100" class="textbox-f" textboxname="10" style="display: none;">
<span class="textbox textbox-invalid" style="width: 98px; height: 28px;">
<input id="_easyui_textbox_input2" type="text" class="textbox-text validatebox-text validatebox-invalid textbox-prompt" autocomplete="off" tabindex="" placeholder="" title="" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; height: 28px; line-height: 28px; width: 90px;">
<input type="hidden" class="textbox-value" name="10" value="">
</span>
</div>
所以隐藏节点是需要注意
$("#10").parents(".topjui-input-block").hide();
$("#10").parents(".topjui-input-block").hide();
var name = KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲10").attr("text…(“input[name=’”+name+"’]").prop(“disableddisabled属性”,true);//设置disabled属性
5.提交时参数验证
var submitFormFn = function() {
// 提示信息
var isValid = $('#rechageForm').form('validate');
if (!isValid) {
return isValid;
}
var resultData=$('#rechageForm').serializeObject();
var faceValues= new Array();
var actualValues =new Array();
$.each(resultData, function(i) {
if(i!="province"&&i!="operator"){
faceValues.push(i);
actualValues.push(resultData[i])
}
});
var returnDate={
province:resultData.province,
operator:resultData.operator,
faceValues:faceValues.join(),
actualValues:actualValues.join(),
userId:$.cookie('USER_ID'),
speedType:2
};
if(ids){
returnDate['ids']=ids;
}
$.ajax({
url:'url',
method:'post',
data:returnDate,
success:function(data){
if(data.statusCode==200){
$('#rechageDatagrid').iDatagrid('reload');
$.iMessager.show({
title:'操作提示',
timeout:3000,
msg:'操作成功'
});
$editDialog.dialog('close');
}else{
$.iMessager.alert('error',data.message);
}
$.iMessager.progress('close');
}
});
}
注意事项
提交验证，之前写的 required:true,validType:‘intOrFloat’，在提交的时候需要增加如下的验证（这很重要）：
var isValid = $(’#rechageForm’).form(‘validate’);
if (!isValid) {
return isValid;
}
提交后需要注意弹框关闭时机，是交互完整 避免在弹框方法里进行关闭
以上均属个人总结，或许其中有一些错误，欢迎指正