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,"&quot;") + '\')">编辑</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;
}

提交后需要注意弹框关闭时机，是交互完整避免在弹框方法里进行关闭

以上均属个人总结，或许其中有一些错误，欢迎指正

TopJui 我踩的那些坑相关推荐

mac git使用与配置踩过的坑
#mac git使用与配置踩过的坑标题mac配置git ssh密钥参考链接mac配置git ssh key go get安装失败的解决方法 go get约等于git clone+go instal ...
java项目经理也就那么回事_网易PM | 我们之前在需求评审环节踩过的坑...
原本觉得需求评审也就那么回事儿,大家应该都差不多这么做的,没啥好说的.不过前不久有一位同学问起来我们是怎么做需求评审的,然后发现有一些团队的做法可能还不大一样,他们也还踩着我们之前踩过的坑,他们还在探 ...
Redis 集群部署及踩过的坑
本文目标要在单台机器上搭建Redis集群,方式是通过不同的TCP端口启动多个实例,然后组成集群,同时记录在搭建过程中踩过的坑. 安装准备 centos版本:6.7 redis版本:3.2.3 安装方 ...
AWS Device Farm介绍及Appium踩过的坑
本文记录了在AWS Device Farm上进行Appium TestNG进行手机应用UI自动化测试的流程及遇到的问题,及具体的解决方法.同时记录了使得测试脚本更稳定的一些代码写法. Device F ...
arcgis python 二次开发_我在部署ArcGIS API for Python时踩到的坑
ArcGIS API for Python相比于其他ESRI产品,还是很年轻.我在部署时踩到了坑,网上也找不到解决方法,很是煞风景,也很打击学习的积极性. 今天回顾一下,做个总结吧.一方面自己备忘,另 ...
开发路上踩过的坑要一个个填起来————持续更新······（7月30日）
欢迎转载,请注明出处! https://gii16.github.io/learnmore/2016/07/29/problem.html 踩过的坑及解决方案记录在此篇博文中! 个人理解,如有偏颇,欢 ...
git服务器安装位置,Linux服务器安装gitlabe-runner，并部署包到指定目录，还有踩的一些坑～～...
[TOC] 前言:上篇文章讲解了如何安装一个本地runner,然后用本地runner发布本地包到Linux,但这会有一个问题,在本地runner用scp向Linux发送文件,会造成服务器上的文件越来越 ...
logstash导入数据到Elasticsearch踩过的坑详解
一.前言这篇主要记录在导入数据时候踩到的坑,这些坑总共花费我小一天的时间,记录一下. 二.正文 1.logstash显示在导入数据,ES也成功新建了索引,但是没数据最开始遇到的是这个坑,logst ...
学python就业要看哪些书-编程0基础自学Python，踩完这些坑，我才成功就业！
" 0基础小白学Python的路程不易,但总有一些思路和方法值得借鉴,知道这些能让我们少走很多弯路. 今天我们就来分享2位前辈的学习经验和方法. 零基础学编程的方法回忆一下我自己学习计算机 ...
修改 framework 代码的经验和踩过的坑
点击打开链接修改 framework 代码的经验和踩过的坑 1 经验源码主要目录结构目录子目录子目录描述 android/frameworks/base core java/com/and ...

TopJui 我踩的那些坑

TopJui 踩坑事项

TopJui 我踩的那些坑相关推荐

最新文章

热门文章