easyUi局部刷新例子

Html:

<div class="row">
    <!-- 左侧分类 -->
    <div class="col-sm-3">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>商品分类</h5>
            </div>
            <div class="ibox-content">
                <ul id="cate" >

                </ul>
            </div>
        </div>
    </div>
    <!-- 右侧商品 -->
    <div class="col-sm-9" id="box">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5 class="goodtitle">暂无商品</h5>
            </div>
            <div class="ibox-content">
                <div data-toggle="buttons-checkbox" class="btn-group" id="tool" style="display: none;">
                    <button data-type="add" class="btn btn-primary active" type="button" aria-pressed="true"><i class="fa fa-plus"></i> 添加商品</button>
                </div>
                <!-- 数据表刷新位置 -->
                <table id="content">

                </table>
            </div>
        </div>
    </div>
</div>

 

JS:

<script>
    var cat_id = '';
    var url = '';
    $("#cate").tree({
        url:"/admin/goods/getTree",
        animate:true,
        lines:true,
        onClick:function (node) {

            if($("#cate").tree('isLeaf',node.target)) //判断当前节点是否是子级
            {
                url = '/admin/goods/getCate/cid/'+node.id;
                cat_id = node.id;
                $(".goodtitle").html(node.text);
                $("#tool").show();

                //刷新右侧数据表格
                $("#content").datagrid({
                    url:url,
                    columns:[[
                        {field:'id',title:'ID',width:100},
                        {field:'goods_name',title:'商品名称',width:100},
                    ]]

                });
            }


        }
    });


    //添加商品
    $("button[data-type=add]").on('click',function(){
        layer.open({
            type: 2,
            title: '添加商品',
            shadeClose: true,
            shade: 0.3,
            maxmin: true, //开启最大化最小化按钮
            area: ['893px', '600px'],
            content: '/admin/goods/add/id/'+cat_id
        });
    });
    
    //获取要定位元素距离浏览器顶部的距离
    var boxTop = $("#box").offset().top;
    //滚动条事件
    $(window).scroll(function(){
        //获取滚动条的滑动距离
        var scroH = $(this).scrollTop();
        //滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离，就固定，反之就不固定
        if(scroH >= boxTop) {
            $("#box").css({"position":"fixed","top":0,"right":6});
        } else if (scroH < boxTop) {
            $("#box").css('position','static');
        }

    })
</script>

转载于:https://my.oschina.net/u/3483680/blog/1829109