基于 bootstrap 的数据展示--bootgrid 样式修改。
发布时间:2020-12-17 21:04:22 所属栏目:安全 来源:网络整理
导读:bootgrid 的官网案例 http://www.jquery-bootgrid.com/Examples 官方demo 样式 基于项目需要,取消了一些不需要 的功能,修改了源码 最后样式成了这样 以下是修改的内容 修改说明 都在 jquery bootgrid.js 中修改 css 样式中 css: { dropDownMenu: "dropdown
bootgrid 的官网案例 http://www.jquery-bootgrid.com/Examples 官方demo 样式 基于项目需要,取消了一些不需要 的功能,修改了源码 最后样式成了这样 以下是修改的内容 修改说明 css: { dropDownMenu: "dropdown btn-group dropup",// must be a unique class name or constellation of class names within the actionDropDown //修改dropDownMenu: "dropdown btn-group",为dropDownMenu: "dropdown btn-group dropup" //修改说明,使每页显示多少条记录的 toogle 向上 } templates: { //footer: "<div id="{{ctx.id}}" class="{{css.footer}}"><div class="row"><div class="col-sm-6"><p class="{{css.pagination}}"></p></div><div class="col-sm-6 infoBar"><p class="{{css.infos}}"></p></div></div></div>",//修改footer为下面的 footer: "<div id="{{ctx.id}}" class="{{css.footer}}"><div class="row">" + "<div class="col-sm-6 "></div><div class="col-sm-6"><p class="{{css.actions}}"></p><p class="{{css.pagination}}"></p></div></div></div>",header: "<div id="{{ctx.id}}" class="{{css.header}}"></div>",} ? ?修改header 和 footer 。 ? ?使 刷新和页数选择的 button 显示在下面。去掉 show page 从 x 到 x 的文字说明。 function init() { this.element.trigger("initialize" + namespace); loadColumns.call(this); // Loads columns from HTML thead tag this.selection = this.options.selection && this.identifier != null; loadRows.call(this); // Loads rows from HTML tbody tag if ajax is false prepareTable.call(this); renderTableHeader.call(this); //注释这个,不显示search 框 //renderSearchField.call(this); //search 框 //分页 ,刷新,隐藏列工具条在一个方法中,去修改renderActions方法 renderActions.call(this); //分页,刷新,隐藏等框 loadData.call(this); this.element.trigger("initialized" + namespace); } function renderActions() { if (this.options.navigation !== 0) { var css = this.options.css,selector = getCssSelector(css.actions),actionItems = findFooterAndHeaderItems.call(this,selector); if (actionItems.length > 0) { var that = this,tpl = this.options.templates,actions = $(tpl.actions.resolve(getParams.call(this))); // Refresh Button if (this.options.ajax) { var refreshIcon = tpl.icon.resolve(getParams.call(this,{ iconCss: css.iconRefresh })),refresh = $(tpl.actionButton.resolve(getParams.call(this,{ content: refreshIcon,text: this.options.labels.refresh }))) .on("click" + namespace,function (e) { // todo: prevent multiple fast clicks (fast click detection) e.stopPropagation(); that.current = 1; loadData.call(that); }); actions.append(refresh); } // Row count selection renderRowCountSelection.call(this,actions);//选择一页显示多少行的button // Column selection //注释 这一行,不在显示 隐藏某一列的button //renderColumnSelection.call(this,actions); replacePlaceHolder.call(this,actionItems,actions); } } } labels: { all: "All",//选择页数时 all 的显示文字 infos: "show ${} to ${} ",//修改为空内容。 loading: "Loading...",//加载时显示的内容 noResults: "No results found!",//未查询到结果是显示内容 refresh: "Refresh",//刷新 search: "Search"//查询 },最后在页面 重写样式 // 分页的样式,主要修改 float:right .pagination { float: right; display: inline-block; padding-right: 0; margin: 0px 0px; border-radius: 4px; } //刷新和选择一页显示多少条的按钮样式 .btn-group{ float:right; } 欢迎加入 开源软件交流群 QQ群:32730682 欢迎加入 程序员兼职 QQ群:?108464914 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |