据悉Metronic的Bootstrap开发框架经验总结(2)–列表分页处理和插件JSTree的施用

在上篇《基于Metronic的Bootstrap开发框架经验总括(1)-框架总览及菜单模块的拍卖》介绍了Bootstrap开发框架的一部分基础性概括,包括完整界面效果,以及布局、菜单等内容,本篇继续这一核心,介绍页面内容常用到的数据分页处理,以及Bootstrap插件JSTree的应用。在数量的界面显示当中,表格数据的来得以及分页是那么些常见的处理操作,利用Bootstrap的体裁布局,以及JQuery的Ajax数据处理,就能很好贯彻多少的动态显示和分页处理。

1、列表展现和分页处理

1)数据的列表显示

在成千上万页面里面,我们一般都需要对数据库记录举办列表体现并开展分页。

Bootstrap 1

右侧的树列表下面小节介绍,左侧就是大家一般的多寡查询彰显区域,分为查询内容和数量列表两有的,查询内容,我们一般位于一个表单里面进行拍卖,用户触发查询的时候,我们对事件展开处理,并从MVC后台的控制器里面请求对应的数据再次回到给页面前端,对数据开展展现和分页处理即可。

如菜单页面的询问代码如下所示。

                    <form class="form-horizontal" id="ffSearch">
                        <div class="col-md-3 col-sm-3 col-xs-6">
                            <div class="form-group">
                                <label class="control-label col-md-4">显示名称</label>
                                <div class="col-md-8">
                                    <input name="WHC_Name" type="text" class="form-control">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-3 col-xs-6">
                            <div class="form-group">
                                <label class="control-label col-md-4">功能ID</label>
                                <div class="col-md-8">
                                    <input name="WHC_FunctionId" type="text" class="form-control">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-3 col-xs-6">
                            <div class="form-group">
                                <label class="control-label col-md-4">Web连接地址</label>
                                <div class="col-md-8">
                                    <input name="WHC_Url" type="text" class="form-control">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-3 col-xs-6">
                            <div class="form-group">
                                <label class="control-label col-md-4">Web菜单图标</label>
                                <div class="col-md-8">
                                    <input name="WHC_WebIcon" type="text" class="form-control">
                                </div>
                            </div>
                        </div>
                    </form>

咱俩在页面的JS代码里面,处理页面起先化后,对数码举办询问的处理操作,如下脚本所示。

        //页面初始化
        $(function () {
            initJsTree(); //初始化树

            BindEvent();        //绑定事件处理
            Search(currentPage);//初始化第一页数据
            InitDictItem();     //初始化字典信息
        });

而数据的展现部分,HTML代码如下所示。首要就是显得了表头内容,表格的着重点内容grid_body则有脚本动态构建并展示

                    <table id="grid" class="table table-striped table-bordered table-hover" cellpadding="0" cellspacing="0" border="0" class="display" width="100%">
                        <thead id="grid_head">
                            <tr>
                                <th class="table-checkbox" style="width:40px"><input class="group-checkable" type="checkbox" onclick="selectAll(this)"></th>
                                <th>显示名称</th>
                                <th>排序</th>
                                <th>功能ID</th>
                                <th>菜单可见</th>
                                <th>Web连接地址</th>
                                <th>Web菜单图标</th>
                                <th>系统编号</th>
                                <th style="width:90px">操作</th>
                            </tr>
                        </thead>
                        <tbody id="grid_body"></tbody>
                    </table>
                    <div class="paging-toolbar">
                        <ul id='grid_paging'></ul>
                    </div>

而数据的突显,是在页面准备完成后,通过Search脚本函数举行拍卖,处理的时候,先体系号表单的口径和分页的尺度音信,传入MVC控制器,获取相应的列表数据,在界面上开展动态绑定即可成功整个处理过程了。具体代码截图如下所示。

Bootstrap 2 

而其中的代码 

tr += getActionHtml(item.ID); 

则是经过脚本生成一些操作按钮,界面如下所示。

Bootstrap 3

2)数据分页处理

咱俩页面呈现的数量貌似不是固定的笔录,由此分页也是很必要的拍卖,能够增强性能,也足以增强用户的友好体验,其中的数额分页是运用了Bootstrap的插件Bootstrap
Paginator 举办拍卖的。那么些控件用的很多,是一个很有力的分页插件。

Bootstrap
Paginator 它的GitHub代码地址为:https://github.com/lyonlai/bootstrap-paginator 

它的应用例子介绍,可以参照:http://lyonlai.github.io/bootstrap-paginator/

该控件使用的时候,引入Jquery和Bootstrap样式和类库后,通过下边的代码行即可添加应用。

<script src="/js/bootstrap-paginator.min.js"></script>

该控件分页可以由此处理page-clicked和page-changed事件展开落实。

分页体现内容,我们透过在HTML代码里面添加一个DIV举办,注解一个ID为grid_paging的UL元素,代码如下所示。

  <div class="paging-toolbar">
         <ul id='grid_paging'></ul>
    </div>

接下来实际的JS里面处理代码如下所示。

Bootstrap 4

在MVC的后台,我们需要得到用户在前者页面传入的分页条件和表单数据标准,这样大家就可以遵照这多少个参数,获取到对应的数目再次来到给客户端了。

由于那多少个处理都是很通用的,由此大家得以停放基类控制器举行拍卖,如若急需特殊化处理,再在子类控制器里面重写分页函数 FindWithPager 即可。

        /// <summary>
        /// 根据条件查询数据库,并返回对象集合(用于分页数据显示)
        /// </summary>
        /// <returns>指定对象的集合</returns>
        public virtual ActionResult FindWithPager()
        {
            //检查用户是否有权限,否则抛出MyDenyAccessException异常
            base.CheckAuthorized(AuthorizeKey.ListKey);

            string where = GetPagerCondition();
            PagerInfo pagerInfo = GetPagerInfo();
            List<T> list = baseBLL.FindWithPager(where, pagerInfo);

            //Json格式的要求{total:22,rows:{}}
            //构造成Json的格式传递
            var result = new { total = pagerInfo.RecordCount, rows = list };
            return ToJsonContentDate(result);
        }  

里头GetPagerInfo就是获取用户传入进来的分页参数,还记得我们地点前端页面处理的URL参数吗,如下所示。

url = "/Menu/FindWithPager?page=" + page + "&rows=" + rows;

具体MVC控制器GetPagerInfo函数的实现代码如下所示。

        /// <summary>
        /// 根据Request参数获取分页对象数据
        /// </summary>
        /// <returns></returns>
        protected virtual PagerInfo GetPagerInfo()
        {
            int pageIndex = Request["page"] == null ? 1 : int.Parse(Request["page"]);
            int pageSize = Request["rows"] == null ? 10 : int.Parse(Request["rows"]);

            PagerInfo pagerInfo = new PagerInfo();
            pagerInfo.CurrenetPageIndex = pageIndex;
            pagerInfo.PageSize = pageSize;

            return pagerInfo;
        }

然后拿走到表单条件和分页条件后,传入给框架的政工逻辑类处理就足以了,这里曾经是框架底层的补助范围了,不在继续拓展。

List<T> list = baseBLL.FindWithPager(where, pagerInfo);

最后的界面效果如下所示

Bootstrap 5

 

2、插件JSTree

前边小节也增强的树列表的彰显,在相似情状下,倘诺数量有层次的,那么通过树列表扬显,可以很直观的展现出它们的布局,因而树列表在许多情形下,可以协助我们对数据的归类显示。

如对于用户数据以来,大家可以依照用户的团队单位依然角色举办分拣,他们相互可以通过树列表举办直观的突显,这样大家在查找不同档次的用户列表的时候,就很好找了。

Bootstrap 6

或者对于字典数据仍然省份都会的数额,一样更可以透过树列表举行显示

Bootstrap 7 
 Bootstrap 8

JSTree 控件的合法地址为https://www.jstree.com/

网站对JSTree控件的行使表达及案例教学的早已很清楚了,一般景色下,大家直接参考例子就足以应用了。

简单的JSTree使用代码如下所示

$(function () { $('#jstree_demo_div').jstree(); });

对于JSTree的事件,大家一般可以经过下面代码举行绑定事件。

$('#jstree_demo_div').on("changed.jstree", function (e, data) {
  console.log(data.selected);
});

尽管大家需要拿到JStree控件选中节点的始末,然后开展连锁的拍卖操作,那么它的拍卖代码如下所示。

            //绑定双击事件
            $("#jstree_div").bind("dblclick.jstree", function (e, data) {
                EditDept();
            });
            $("#jstree_tag").bind("dblclick.jstree", function (e, data) {
                EditTag();
            });

双击事件,其实是连接的单击事件处理,一般情形下,或先选中当前节点,我们也足以在双击的时候,获取相应的节点ID,如下代码所示。

            bindJsTree("jstree_div", "/Menu/GetMenuJsTreeJson");
            $("#jstree_div").bind("dblclick.jstree", function (e, data) {
                var id = $(e.target).parents('li').attr('id');
                EditViewById(id);
            });

也就是足以透过

var id = $(e.target).parents('li').attr('id');

赢得双击的节点ID,获取选用节点的称呼则能够通过代码获取:

var eventNodeName = e.target.nodeName;

 

JSTree一般大家会由此JSON数据开展动态绑定,这些JSON的多寡格式定义如下所示。

{
  id          : "string" // required
  parent      : "string" // required
  text        : "string" // node text
  icon        : "string" // string for custom
  state       : {
    opened    : boolean  // is the node open
    disabled  : boolean  // is the node disabled
    selected  : boolean  // is the node selected
  },
  li_attr     : {}  // attributes for the generated LI node
  a_attr      : {}  // attributes for the generated A node
}

貌似境况下,大家透过下边的脚本举办数据的清空和绑定操作

$('#jstree_demo_div').data('jstree', false);//清空数据,必须

//异步进行JSON数据的绑定
$.getJSON(url, function (data) {
    $('#jstree_demo_div').jstree({
        'core': {
            'data': data,
            "themes": {
                "responsive": false
            }
        }
    }).bind('loaded.jstree', loadedfunction);
});  

一旦我们需要给用户提供复选框,设置JSTree的入选状态,界面效果如下所示。

Bootstrap 9

那么一般的起初化函数就需要扭转一下,如下代码所示

        //带复选框的JSTree的初始化代码
        $.getJSON(url, function (data) {
            control.jstree({
                'plugins' : [ "checkbox" ], //出现选择框
                'checkbox': { cascade: "", three_state: false }, //不级联
                'core': {
                    'data': data,
                    "themes": {
                        "responsive": false
                    }
                }
            }).bind('loaded.jstree', loadedfunction);
        });

Bootstrap,综述两者,大家可以进一步把JSTree控件的起初化绑定提炼为一个JS的共用函数bindJsTree即可。

//以指定的Json数据,初始化JStree控件
//treeName为树div名称,url为数据源地址,checkbox为是否显示复选框,loadedfunction为加载完毕的回调函数
function bindJsTree(treeName, url, checkbox, loadedfunction) {
    var control = $('#' + treeName)
    control.data('jstree', false);//清空数据,必须

    var isCheck = arguments[2] || false; //设置checkbox默认值为false
    if(isCheck) {
        //复选框树的初始化
        $.getJSON(url, function (data) {
            control.jstree({
                'plugins' : [ "checkbox" ], //出现选择框
                'checkbox': { cascade: "", three_state: false }, //不级联
                'core': {
                    'data': data,
                    "themes": {
                        "responsive": false
                    }
                }
            }).bind('loaded.jstree', loadedfunction);
        });
    }
    else {
        //普通树列表的初始化
        $.getJSON(url, function (data) {
            control.jstree({
                'core': {
                    'data': data,
                    "themes": {
                        "responsive": false
                    }
                }
            }).bind('loaded.jstree', loadedfunction);
        });        
    }
}

故而在页面的绑定JSTree的时候,代码可以简化一下

        //初始化组织机构列表
        function initDeptTreeview() {
            var treeUrl = '/User/GetMyDeptJsTreeJson?userId=@Session["UserId"]';
            bindJsTree("jstree_div", treeUrl);

            //树控件的变化事件处理
            $('#jstree_div').on("changed.jstree", function (e, data) {
               var icon = data.node.icon;               
               loadDataByOu(data.selected);
            });
        }

对于复选框的列表,开始化代码如下所示。

            //初始化所有该用户的所有功能集合
            var treeUrl = '/Function/GetRoleFunctionJsTreeByUser?userId=@Session["UserId"]';
            bindJsTree("tree_function", treeUrl, true);

            //角色数据权限,先初始化所有部门
            treeUrl = '/User/GetMyDeptJsTreeJson?userId=@Session["UserId"]';
            bindJsTree("tree_roledata", treeUrl, true);

对此复选框,我们一般是初叶化数据,然后在依照需要安装树列表的当选状态,那种毫不反复起初化树,可以使得增长性能和响应经验。

那么我们在最先化树列表后,就需要清空选拔项,然后设置我们所需要的接纳项即可,具体代码如下所示,注意其中的uncheck_all和check_node事件的拍卖。

        //初始化角色数据权限集合(组织机构)
        function initRoleData(id) {
            if (id != "") {
                var treeMenu = "tree_roledata";
                $('#' + treeMenu).jstree("uncheck_all");//取消所有选中

                //勾选指定内容
                $.getJSON("/RoleData/GetRoleDataList?r=" + Math.random() + "&roleId=" + id, function (json) {
                    $.each(json, function (i, item) {
                         $('#' + treeMenu).jstree('check_node', item);//将节点选中 
                    });
                });
            }
        }

数量保存的时候,我们赢得JSTree的节点选中列表就可以展开多少的保存了,具体代码如下所示。

        //保存角色数据权限
        function saveRoleData(roleid) {
            var ouList = $('#tree_roledata').jstree('get_selected');
            var url = '/RoleData/UpdateData?r=' + Math.random();
            var postData = { roleId: roleid, ouList: ouList.join(',')};

            $.post(url, postData, function (json) {
                initRoleData(roleid);
            }).error(function () {
                showTips("您未被授权使用该功能,请联系管理员进行处理。");
            });
        }

Bootstrap 10 

好了,介绍到这里,基本上也把正常的数码显示,数据分页;JSTree的绑定、事件处理,数据保存等操作介绍的对峙完好了,希望收获大家的连续扶助,我会继续详细介绍Bootstrap开发里面涉及到的要义和一一插件的利用,以便把读书更是具体化,实用化,可以给我们实价开发项目做有效的参阅。

 

比方有趣味,可以延续参照多重小说:

遵照Metronic的Bootstrap开发框架经验总计(1)-框架总览及菜单模块的拍卖

依照Metronic的Bootstrap开发框架经验统计(2)–列表分页处理和插件JSTree的运用

据悉Metronic的Bootstrap开发框架经验统计(3)–下拉列表Select2插件的使用

依照Metronic的Bootstrap开发框架经验计算(4)–Bootstrap图标的领到和选取 

依照Metronic的Bootstrap开发框架经验总计(5)–Bootstrap文件上传插件File
Input的运用

据悉Metronic的Bootstrap开发框架经验总计(6)–对话框及指示框的拍卖和优化

据悉Metronic的Bootstrap开发框架经验总括(7)–数据的导入、导出及附件的查看处理

基于Metronic的Bootstrap开发框架经验总计(8)–框架功效完全界面介绍

据悉Metronic的Bootstrap开发框架经验总计(9)–实现Web页面内容的打印预览和保存操作

 

相关文章