管理后台

Hi,admin 返回网站首页

首页

登录1 登录2 登录3 登录4 登录5

布局

布局1 布局2 布局3 布局4 布局5 布局6

展示类

统计面板步骤

按钮和表单

按钮表单日期编辑器

盒子/列表/面包屑/分页

盒子列表面包屑 tab切换分页

提示和标签

提示条提示框

功能组件

ajax 编辑文字图片上传层级选择复制组件删除功能 filter 排序树级菜单树级下拉菜单弹窗 ajax table ajax select cascade级联下拉框日历

24等分排版

ajax

ok ok-msg error


<span   class="mo-btn mo-btn--info"
        data-ajax-method="get"
        data-ajax-data="action=ok"
        data-ajax-url="/m/json/ok.json"
>ok</span>

<span   class="mo-btn mo-btn--info"
        data-ajax-method="get"
        data-ajax-data="action=ok"
        data-ajax-url="/m/json/ok-msg.json"
>ok-msg</span>
<span   class="mo-btn mo-btn--danger"
        data-ajax-method="get"
        data-ajax-data="action=error&id=1"
        data-ajax-url="/m/json/err.json"
>error</span>

html

/m/json/ok.json
{
    "status": "success"
}
/m/json/ok-msg.json
{
    "status": "success",
    "msg": "成功提示"
}
/m/json/err.json
{
    "status": "error",
    "msg": "错误原因"
}

data-ajax-method

请求方式

data-ajax-method="get"
data-ajax-method="post"

默认值：get

data-ajax-data

提交参数

data-ajax-data="name=value"
data-ajax-data="name=value&name2=value2"
data-ajax-data="name[]=nimo&name[]=fast"

data-ajax-url

请求地址

data-ajax-url="/some.php"

data-ajax-confirm 确认

remove


<span   class="mo-btn mo-btn--danger"
        data-ajax-confirm="确认删除？"
        data-ajax-method="get"
        data-ajax-data="id=1"  
        data-ajax-url="/m/json/ok.json"
>remove</span>

data-ajax-remove

abcdef remove


<div class="js-list" >
    abcdef
    <span   class="mo-btn mo-btn--danger"
            data-ajax-remove="closest&.js-list"
            data-ajax-data="id=1"  
            data-ajax-url="/m/json/ok.json"
    >remove</span>
</div>

以 & 为分隔符配置选择器，以当前操作元素为起始元素

方法&目&方法&目标

或者第一个是 目标 则以目标为起始元素

方法

方法名	描述
closest	从元素本身开始，在DOM 树上逐级向上级元素匹配，并返回最先匹配的祖先元素。以数组的形式返回与选择器相匹配的所有元素，从当前元素开始，在 DOM 树中向上遍历。
find	通过一个选择器，jQuery对象，或元素过滤，得到当前匹配的元素集合中每个元素的后代。

目标

目标就是 jQuery 选择器

.js-demo tr tr>a

目标为起始元素

ajaxremovetarget

remove


<div id="ajaxremovetarget">ajaxremovetarget</div>

<span   class="mo-btn mo-btn--danger"
        data-ajax-remove="#ajaxremovetarget"
        data-ajax-data="id=1"  
        data-ajax-url="/m/json/ok.json"
>remove</span>

目标

我要被干掉了

remove


<div id="ajaxremovetarget2">
    <h2>目标</h2>
    <span>我要被干掉了</span>
</div>

<span   class="mo-btn mo-btn--danger"
        data-ajax-remove="#ajaxremovetarget2&find&span"
        data-ajax-data="id=1"  
        data-ajax-url="/m/json/ok.json"
>remove</span>

data-ajax-href

// m/json/ok-href.json
{
    "status": "success",
    "data": {
        "href": "/"
    }
}

href


<span class="mo-btn" data-ajax-url="/m/json/ok-href.json">href</span>

AJAX响应的JSON中存在 data.href ，且 status 等于 success 时候会根据 data.href 的地址跳转。

data.href 返回 "refresh" 则刷新当前页面

timeout

// m/json/ok-href-timeout.json
{
    "status": "success",
    "data": {
        "href": "/",
        "timeout": 1000
    }
}

响应的JSON中存在 data.timeout 则会延迟跳转到 data.href，延迟的时间是 timeout 的值

timeout


<span class="mo-btn" data-ajax-url="/m/json/ok-href-timeout.json">timeout</span>

checkbox 删除选中项

删除选中项目

张三

李四

王五


<span class="mo-btn mo-btn--danger" data-ajax-url="/m/json/ok.json" data-ajax-checkbox=".js-people:checked" data-ajax-remove=".js-people:checked&closest&.js-item" >删除选中项目</span>
<div class="js-item" >
    <input name="id" value="1" type="checkbox" class="mo-input js-people" /> 张三
</div>
<div class="js-item" >
    <input name="id" value="2" type="checkbox" class="mo-input js-people" /> 李四
</div>
<div class="js-item" >
    <input name="id" value="3" type="checkbox" class="mo-input js-people" /> 王五
</div>

全选反选

请查看 checkall 模块

ajax 响应后回调

callback


<span   class="mo-btn mo-btn--info"
        data-ajax-method="get"
        data-ajax-data="action=ok"
        data-ajax-url="/m/json/ok-msg.json"
        data-ajax-callback="ajaxsome"
>callback</span>
<script>
window.ajaxsome = function (res, $element) {
    console.log('ajax-callback')
    console.log(res)
    console.log($element)
    // 根据 res 做一些事情
}
</script>

https://github.com/fast-flow/admin

Create By fast-flow