在写代码的时候发现如果不是一次在页面写好html代码,而是通过页面加载完成后执行某个方法时添加相应的组件时,添加上去后easyui是不会给你初始化这个组件的,这个时候就必须手动的去初始化这个组件,
如我下面写的聊天窗口,点击聊天的时候初始化窗口,这个时候就需要用到
$.parser.parse(‘#cc‘); // 解析指定节点
才能初始化窗口,否则追加上去是没有效果的,但是发现用是时候这个id又不能为当前组件的id,必须为当前组件的父容器的id
如:<div id="customerChatWindow" class="easyui-window"></div>
这是easyui的window组件,这个 id不能在parser中用,否则没效果,必须给其添加一个父容器使用父容器的id
<div id="showChatwindow">
<div id="customerChatWindow" class="easyui-window"></div>
</div>
$.parser.parse(‘#showChatwindow‘);
这么使用才会正常
function initChatsWindow(oid){
var chat = ‘<div id="showChatwindow">‘;
chat += ‘<div id="customerChatWindow" class="easyui-window" data-options="title:\‘聊天\‘,width:400,height:600,‘;
chat += ‘collapsible:false,minimizable:false,maximizable:false,onResize:function(width, height){$(\‘#messageDataview\‘).height(height-38-145);}">‘;
chat += ‘<input id="customerId" type="hidden" />‘;
chat += ‘<div id="chartWindow" class="easyui-layout" style="width:100%;height:100%;" data-options="fit:true"> ‘;
chat += ‘ <div data-options="region:\‘center\‘,noheader:true">‘;
chat += ‘ <div style="border-width: 0px; overflow: auto; margin: 0px; width: 100%; height: 415px; left: 0px; top: 0px; background-color: white;"‘;
chat += ‘ id="messageDataview" >‘;
chat += ‘ </div>‘;
chat += ‘ <div id="panel-1219" style="margin: 0px; width: 100%; left: 0px; bottom: 0px; position: absolute;background-color: #d3e1f1;overflow: hidden;">‘;
chat += ‘ <div id="toolbar-1221" style="width: 100%; left: 0px; top: 0px;height: 22px;">‘;
chat += ‘ <table style="width:100%">‘;
chat += ‘ <tr>‘;
chat += ‘ <td width="50%">‘;
chat += ‘ <div id="container-1222" style="margin: 0px; left: 0px; top: 0px;">‘;
chat += ‘ <img id="filefield-1223-buttonEl-btnIconEl" onclick="sendImageToUserOfChat($(\‘#customerId\‘).val());" src="/oss-portlet/images/icons/btn_send_pic.png" />‘;
chat += ‘ </div>‘;
chat += ‘ </td>‘;
chat += ‘ <td width="50%" align="right">‘;
chat += ‘ <div style="border-width: 1px;">‘;
chat += ‘ <a href="javascript:void(0)" onclick="openOrCloseChatsMessageHistoryInfo($(\‘#customerId\‘).val());" style="width:80px">‘;
chat += ‘ <img src="/oss-portlet/images/icons/btn_history.png" />‘;
chat += ‘ <span id="button-1225-btnInnerEl" class="x-btn-inner">历史消息</span>‘;
chat += ‘ </a>‘;
chat += ‘ </div>‘;
chat += ‘ </td>‘;
chat += ‘ </tr>‘;
chat += ‘ </table>‘;
chat += ‘ </div>‘;
chat += ‘ <div id="panel-1219-body" style="width: 100%; left: 0px; top: 26px; height: 95px;overflow: hidden;">‘;
chat += ‘ <table style="border-width: 0px; table-layout: fixed; margin: 0px; width: 100%;" id="textareafield-1220">‘;
chat += ‘ <tbody>‘;
chat += ‘ <tr id="textareafield-1220-inputRow">‘;
chat += ‘ <td id="textareafield-1220-bodyEl" colspan="3" style="width: 100%;">‘;
chat += ‘ <textarea id="chatcontent" name="textareafield-1220-inputEl" rows="4" cols="20"‘;
chat += ‘ style="width: 96%;overflow: auto;"></textarea>‘;
chat += ‘ </td>‘;
chat += ‘ </tr>‘;
chat += ‘ </tbody>‘;
chat += ‘ </table>‘;
chat += ‘ </div>‘;
chat += ‘ <div style="width: 100%; left: 0px; top: 90px;background-color: #d3e1f1;">‘;
chat += ‘ <p align="right" style="margin:0;">‘;
chat += ‘ <a class="easyui-linkbutton" href="javascript:void(0)" onclick="sendChatsMessage($(\‘#customerId\‘).val(), $(\‘#chatcontent\‘).val());" style="width:80px">发送(Enter)</a>‘;
chat += ‘ </p>‘;
chat += ‘ </div>‘;
chat += ‘ </div>‘;
chat += ‘ </div>‘;
chat += ‘</div>‘;
chat += ‘</div>‘;
chat += ‘</div>‘;
// 添加到body中
$("body").append(chat);
// 解析当前组件,id必须为该组件的父节点
$.parser.parse(‘#showChatwindow‘);
}