TopJui 我踩的那些坑

TopJui 踩坑事项

这是一个前言。至于为什么用这个框架，也是无奈，遍寻度娘基本上没有什么文档是关于TopJui，所以一切你遇到没法解决没有前例可寻的坑，请上网找一下easyui的相关解决办法，如果还是找不到那你就换种方式吧！

1.表格渲染

注意事项：

请将最上面的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 = '编辑';
                    htmlstr += '删除';
                    return htmlstr;
                }
            }
        ]],
        onLoadSuccess:function(data){
            if (!data) {
                var body = $(this).data().datagrid.dc.body2;
                body.find('table tbody').append('
暂无数据
');
            }
        }
    });

需要注意事项

页面之间数据传输不能用对象进行传输，需要将对象转换成json,请参见操作里编辑按钮传输数据，JSON.stringify(row).replace(/"/g,""")，在此使用时请将json 在转换成对象进行数据渲染var recharge = JSON.parse(row);

部分参数说明

fitColumns： true列宽自适应
queryParams： 查询需要的参数
url： 表格渲染的数据
onLoadSuccess:表格数据加载成功后

---

2.弹出框渲染

新增

topjui-menubutton :按钮
iconCls ： 按钮大小 类型
btnCls ：按钮颜色

    //新增弹框
    function  addSlowInfo() {
        $editDialog = $('
');
        $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结构方面阅读

    

        
基本信息
    
    

        

            地区
            

                
            
        
    
  
    

        
充值面额对应定价
    
    

        

            10 : 
            

                
            
        
    
    

        

            20 : 
            

                
            
        
    

部分功能说明

data-toggle="topjui-combobox" 下垃列表   
    
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结构!

你写的结构

渲染出来的结构

所以隐藏节点是需要注意
$("#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;
}

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

---

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