jfinal 和bjui 常用前后交互方式

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导航网  可以自由收藏管理个人常用网址的便捷上网工具