bjui 常用前后交互方式
1，form表單的data-toggle不同屬性使用場景 **************************************
頁面使用form提交數據如果直接使用原始form表單提交 則會發生跳出框架的情況，要加上 ajaxform 屬性才能正常 data-toggle="ajaxform" ajax異步提交數據，才可以使用bjuirender.closecurrent **************************************
data-toggle="validate"輸入框非空校驗 ************************************** ??
data-toggle="ajaxsearch"用于搜索時實現ajax局部刷新 如下，點擊搜索會局部刷新頁面下面的div <div class="bjui-pageHeader searchBarHeader"> <div class="pagerListBoss"> <form id="pagerForm" data-toggle="ajaxsearch" action="${BASE_PATH}/admin/adminAgenter" method="post"> <input type="hidden" name="pageSize" value="${(model.pageSize)!''}"> <input type="hidden" name="pageCurrent" value="${(model.pageCurrent)!''}"> <div class="bjui-searchBar"> <input type="text" id="customNo" value="" name="word" class="form-control" size="22" placeholder="請輸入客戶姓名或電話" > <button type="submit" class="btn-one btn-sheBei1" data-icon="search" >查找</button> </form> <div class="bjui-pageContent "> 搜索結果 <div class="bjui-Footer"> data-toggle="" ************************************** ? 2,同一頁面不同按鈕請求不同方法實現局部刷新（類似方法多幾個data-toggle="autoajaxload"的div實現同一頁面分不同模塊，每個模塊對應不同的方法render的不同頁面） 關鍵點 1》：內容div 屬性要包含 ： 1，data-url="${BASE_PATH}/admin/account/userDetail" （默認加載的請求地址） 2，data-toggle="autoajaxload" （表示默認自動加載） ? 3，id="layout-user" (用于按鈕綁定) <div id="layout-user" data-url="${BASE_PATH}/admin/account/userDetail" data-toggle="autoajaxload" style="height: 94%;"> 關鍵點 2》：多個按鈕控制 1，data-url="${BASE_PATH}/admin/account/userDetail" (點擊按鈕加載的utl) 2，data-divid="#layout-user"(請求結果展示到綁定的div中) 3，data-toggle="ajaxload"(請求方式異步加載) 前端完整代碼實例 <script type="text/javascript"> function do_open_layout(event, treeId, treeNode) { if (treeNode.isParent) { var zTree = $.fn.zTree.getZTreeObj(treeId) zTree.expandNode(treeNode) return } $(event.target).bjuiajax('doLoad', {url:treeNode.url, target:treeNode.divid}) event.preventDefault() } </script> <div class="bjui-pageHeader"> <div class="bjui-pageContent "> <div class="pageContentFF"> <ul id="layout-tree-account" class="ztree " data-toggle="ztree" data-expand-all="true" data-on-click="do_open_layout"> <li data-url="${BASE_PATH}/admin/account/userDetail" data-divid="#layout-user" data-toggle="ajaxload">用戶信息</li> <li data-url="${BASE_PATH}/admin/account/userPswChange" data-divid="#layout-user" data-toggle="ajaxload">密碼修改</li> </ul>
<div class="clear frameWrapMy" style="margin-left: 210px; height: 100%;"> <div style="height: 100%;"> <fieldset style="height: 100%;"> <div id="layout-user" data-url="${BASE_PATH}/admin/account/userDetail" data-toggle="autoajaxload" style="height: 94%;"> </fieldset> <div class="bjui-Footer">
************************************** ?? 3，a標簽的data-toggle不同屬性使用情況 ? 1》同一頁面內對某條數據的狀態修改 data-toggle="doajax" <a class="runningA" data-url="${BASE_PATH}/admin/adminAgenter/selectAgent?enabled=true&isChecked=true&aid=${(list.id)}" data-toggle="doajax" data-mask="true">解除禁止</a> 2》data-toggle="navtab" ?標簽窗口 3》data-toggle="dialog" ?彈出窗口
************************************** 4 使用jquery ajax上傳數據時 后臺不能renderjson同時再 render(bjuirender.refresh()); ，刷新頁面需要在前端用bjui的方法 ? $(selecter).navtab("refresh","divId"); ?666導航網??可以自由收藏管理個人常用網址的便捷上網工具?

總結

以上是生活随笔為你收集整理的jfinal 和bjui 常用前后交互方式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。