easyui:初始化失败的问题(EasyUI: initialization failure)

在用CSS方式初始化时,如果页面比较复杂,就会造成初始化失败的现象。

例如:combox报错,textbox样式错位等。

解决办法:

针对出问题的页面,用JS初始化,不用CSS方式。

例如:

<div id="columnDialog" class="me-easyui-dialog" data-options="modal:true" style="width: 600px"
    closed="true" buttons="#columnDialog-buttons">
    <form id="columnForm" method="post" novalidate style="margin: 0; padding: 20px 50px" enctype="multipart/form-data">
        <input type="hidden" id="columnID" name="columnID" />
        <input type="hidden" id="parentColumnID" name="parentColumnID" />
        <div
            style="margin-top: 20px; font-size: 14px; border-bottom: 1px solid #ccc">栏目信息</div>
        <div style="margin-top: 10px">
            <input id="columnTitle" name="columnTitle" class="me-easyui-textbox" required="true"
                label="名称:"  style="width: 90%">
        </div>
        <div style="margin-top: 10px">
            <input id="englishTitle" name="englishTitle" class="me-easyui-textbox"
                label="英文名称:" style="width: 90%">
        </div>
        <div style="margin-top: 10px">
            <input id="staticURL" name="staticURL" class="me-easyui-textbox" 
                label="静态网址:" data-options="validType:['length[2,64]']"  style="width: 90%">
        </div>
        <div style="margin-top: 10px">
            <select id="isGetColumnData" class="me-easyui-combobox" name="isGetColumnData" style="width: 232px;" label="是否取栏目数据:" labelWidth="100px">
                   <option value="0">否</option>
                   <option value="1">是</option>
            </select>
        </div>
        <div style="margin-top:10px;">
            <input id="addtionalURL" name="addtionalURL" class="me-easyui-textbox" 
                label="附加URL:" style="width: 90%">
        </div> 
        <div style="margin-top: 10px">
            <select class="me-easyui-combobox" id="tplType"
            name="tplType" label="模板类型:" style="width: 200px" required="true" editable="false" panelHeight="50px">
            <option value="1">栏目</option>
            <option value="2">文章 </option>    
        </select>    
        <div style="margin-top: 10px" class="all column">
            <input id="columnTpl" name="columnTpl" class="me-easyui-textbox all column"
                label="栏目模版:"  style="width: 90%">
        </div>
        <div style="margin-top: 10px" class="all article">
            <input id="articleListTpl" name="articleListTpl" class="me-easyui-textbox all article"
                label="文章列表模版:"  style="width: 90%">
        </div>
        <div style="margin-top: 10px">
            <input id="articleDetailTpl" name="articleDetailTpl" class="me-easyui-textbox"
                label="文章详情模板:"  style="width: 90%">
        </div>
        <div style="margin-top: 10px">
            <select id="isPath" class="me-easyui-combobox" name="isPath" style="width: 200px;" label="是否生成路径:">
                   <option value="1" selected="selected">是</option>
                   <option value="0">否</option>
            </select>
        </div>
    </form>
</div>
$('.me-easyui-layout').layout();
$('.me-easyui-tree').tree();
$('.me-easyui-menu').menu();
$('.me-easyui-textbox').textbox();
$('.me-easyui-combobox').combobox();
$('.me-easyui-filebox').filebox();
$('.me-easyui-linkbutton').linkbutton();
$('.me-easyui-dialog').dialog();
————————

When initializing with CSS, if the page is complex, it will cause initialization failure.

For example: combox error, textbox style dislocation, etc.

terms of settlement:

For the problem page, use js initialization instead of CSS.

For example:

<div id="columnDialog" class="me-easyui-dialog" data-options="modal:true" style="width: 600px"
    closed="true" buttons="#columnDialog-buttons">
    <form id="columnForm" method="post" novalidate style="margin: 0; padding: 20px 50px" enctype="multipart/form-data">
        <input type="hidden" id="columnID" name="columnID" />
        <input type="hidden" id="parentColumnID" name="parentColumnID" />
        <div
            style="margin-top: 20px; font-size: 14px; border-bottom: 1px solid #ccc">栏目信息</div>
        <div style="margin-top: 10px">
            <input id="columnTitle" name="columnTitle" class="me-easyui-textbox" required="true"
                label="名称:"  style="width: 90%">
        </div>
        <div style="margin-top: 10px">
            <input id="englishTitle" name="englishTitle" class="me-easyui-textbox"
                label="英文名称:" style="width: 90%">
        </div>
        <div style="margin-top: 10px">
            <input id="staticURL" name="staticURL" class="me-easyui-textbox" 
                label="静态网址:" data-options="validType:['length[2,64]']"  style="width: 90%">
        </div>
        <div style="margin-top: 10px">
            <select id="isGetColumnData" class="me-easyui-combobox" name="isGetColumnData" style="width: 232px;" label="是否取栏目数据:" labelWidth="100px">
                   <option value="0">否</option>
                   <option value="1">是</option>
            </select>
        </div>
        <div style="margin-top:10px;">
            <input id="addtionalURL" name="addtionalURL" class="me-easyui-textbox" 
                label="附加URL:" style="width: 90%">
        </div> 
        <div style="margin-top: 10px">
            <select class="me-easyui-combobox" id="tplType"
            name="tplType" label="模板类型:" style="width: 200px" required="true" editable="false" panelHeight="50px">
            <option value="1">栏目</option>
            <option value="2">文章 </option>    
        </select>    
        <div style="margin-top: 10px" class="all column">
            <input id="columnTpl" name="columnTpl" class="me-easyui-textbox all column"
                label="栏目模版:"  style="width: 90%">
        </div>
        <div style="margin-top: 10px" class="all article">
            <input id="articleListTpl" name="articleListTpl" class="me-easyui-textbox all article"
                label="文章列表模版:"  style="width: 90%">
        </div>
        <div style="margin-top: 10px">
            <input id="articleDetailTpl" name="articleDetailTpl" class="me-easyui-textbox"
                label="文章详情模板:"  style="width: 90%">
        </div>
        <div style="margin-top: 10px">
            <select id="isPath" class="me-easyui-combobox" name="isPath" style="width: 200px;" label="是否生成路径:">
                   <option value="1" selected="selected">是</option>
                   <option value="0">否</option>
            </select>
        </div>
    </form>
</div>
$('.me-easyui-layout').layout();
$('.me-easyui-tree').tree();
$('.me-easyui-menu').menu();
$('.me-easyui-textbox').textbox();
$('.me-easyui-combobox').combobox();
$('.me-easyui-filebox').filebox();
$('.me-easyui-linkbutton').linkbutton();
$('.me-easyui-dialog').dialog();