基于bootstrap4 后端框架的框架的后端框架的ace中搜索框是怎么实现的

按钮&图标插件树形菜单可拖拽列表首页控制台
响应式Bootstrap网站系统模板,非常不错的轻量级易用的admin后台管理系统,基于Bootstrap3,拥有强大的功能组件以及UI组件,基本能满足后台管理系统的需求,而且能根据不同设备适配显示,而且还有四个主题可以切换。
网页图标全采用FontAwesome,除Bootstrap,jQuery UI使用到的第三方插件有:
jQuery 2.0.3
jQuery UI 1.10.3 (Custom Build)
Twitter Bootstrap 3.0.0
FontAwesome 3.2.1
Google &Open Sans& Font
jQuery Flot Charts 0.8.1
jQuery Sparklines 2.1.2
Easy Pie Chart 1.2.5
jQuery Knob 1.2.0
jQuery Validate 1.11.1
FuelUX 2.3.0 (Spinner & Wizard & Treeview)
FullCalendar 1.6.4
jQuery ColorBox 1.4.27
jQuery dataTables 1.9.4
jQuery Chosen 1.0
jQuery Masked Input 1.3.1
jQuery Input Limiter 1.3.1
jQuery AutoSize 1.17.7
Bootstrap Colorpicker
Bootstrap Datepicker
Bootstrap Timepicker v0.2.3
Bootstrap DateRange Picker 1.2
Bootbox.js 4.0.0
jQuery Gritter 1.7.4
jQuery slimScroll 1.1.1
Spin.js 1.3.0
jQuery UI Touch Punch 0.2.2
Google Code Prettify
ExplorerCanvas
Mindmup Wysiwyg Editor
Toopay Markdown Editor 1.1.4
X-editable 1.4.6
Select2 3.4.2
Bootstrap Tags 2.2.5
jQuery Mobile 1.3.2 (Custom Build)
jqGrid 4.5.2
Dropzone.js 3.0
Nestable lists plugin
Firefox 5+
Google Chrome 14+
Internet Explorer 8
Internet Explorer 9
Bootstrap兼容:
Bootstrap 2.2.x
Bootstrap 2.3.x
Bootstrap 3.0.x
也许你会喜欢和关注与本文内容高度相关的文章:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
最励志官网
路过,留个脚印,网站很棒!
歪妖内涵网
很久没有过来了,今天过来看一看!
最励志官网
不错的网站,很喜欢,期待互访
IE8下运行好像有问题,我自己的和这上面的预览在IE8下都无法正常显示,是什么原因呢
zhuwen201307
主要是兼容性相当好。
挺好的,挺喜欢\ 前端框架:Bootstrap table 分页,排序,搜索 记录
前端框架:Bootstrap table 分页,排序,搜索 记录
作者的热门手记
做CRM或其他后台系统 ,必需至少掌握一个前端框架。
之前学习使用EASYUI写了一个小系统 ,感觉还蛮好用的,就是外观不太好看。
所以现在学习主流的响应式框架 Bootstrap。感觉外观还真是变好看的~哈
1.引用JS 使用的是
bootstrap-3.3.5-dist
2.引用table插件 bootstrap-table.js(谷歌搜索下就有~)
3.引用paginator插件 bootstrap-paginator.js(谷歌搜索下就有~)
前端代码如下:
&!DOCTYPE html&
&meta name="viewport" content="width=device-width" /&
&title&TableTest2&/title&
&link href="~/Content/bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet" /&
&link href="~/Content/bootstrap-table/bootstrap-table.css" rel="stylesheet" /&
&script src="~/Scripts/jquery-1.8.2.min.js"&&/script&
&script src="~/Content/bootstrap-3.3.5-dist/js/bootstrap.min.js"&&/script&
&script src="~/Content/bootstrap-table/bootstrap-table.js"&&/script&
&script src="~/Content/bootstrap-table/bootstrap-paginator.js"&&/script&
&script src="~/Content/bootstrap-table/bootstrap-table-zh-CN.js"&&/script&
&table id="test-table" class="col-xs-12" data-toolbar="#toolbar"&&/table&
&script type="text/javascript"&
$(document).ready(function () {
initTable();
function initTable() {
$('#test-table').bootstrapTable({
method: 'post',
toolbar: '#toolbar',
//工具按钮用哪个容器
striped: true,
//是否显示行间隔色
cache: false,
//是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
pagination: true,
//是否显示分页(*)
sortable: true,
//是否启用排序
sortOrder: "ID asc",
//排序方式
pageNumber: 1,
//初始化加载第一页,默认第一页
pageSize: 12,
//每页的记录行数(*)
pageList: [20, 50, 100, 150],
//可供选择的每页的行数(*)
url: "/home/tablePost3",//这个接口需要处理bootstrap table传递的固定参数
queryParamsType: '', //默认值为 'limit' ,在默认情况下 传给服务端的参数为:offset,limit,sort
// 设置为 '' 在这种情况下传给服务器的参数为:pageSize,pageNumber
//queryParams: queryParams,//前端调用服务时,会默认传递上边提到的参数,如果需要添加自定义参数,可以自定义一个函数返回请求参数
sidePagination: "server",
//分页方式:client客户端分页,server服务端分页(*)
//search: true, //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大
strictSearch: true,
//showColumns: true, //是否显示所有的列
//showRefresh: true, //是否显示刷新按钮
minimumCountColumns: 2,
//最少允许的列数
clickToSelect: true,
//是否启用点击选中行
searchOnEnterKey: true,
search:true,
columns: [
title: "ID",
field: "ID",
align: "center",
valign: "middle",
formatter: function (value, row, index) {
//通过formatter可以自定义列显示的内容
//value:当前field的值,即id
//row:当前行的数据
var a = '&a href="/home/edit?id='+value+'" &修改&/a&';
title: "Sku",
field: "Sku",
align: "center",
valign: "middle",
sortable:true
title: "ProductName",
field: "ProductName",
align: "center",
valign: "middle"
title: "Price",
field: "Price",
align: "center",
valign: "middle"
title: "Descrtiption",
field: "Descrtiption",
align: "center",
valign: "middle"
pagination: true
后端请求代码:
[HttpPost]
public JsonResult tablePost3(string searchText="",string sortName ="",string sortOrder="desc",int pageSize = 10, int pageNumber = 1)
//2.字段排序
//3.搜索关键字
var db = new QHC_IIMSContext();
List&Models.Models.T_Product& proList =
if (sortOrder == "desc")
//desc 降序
proList = db.T_Product.OrderByDescending(t =& t.ID).Skip((pageNumber - 1) * pageSize).Take(pageSize).ToList();
//asc 升序
proList = db.T_Product.OrderBy(t =& t.ID).Skip((pageNumber - 1) * pageSize).Take(pageSize).ToList();
//获取数据库总条数
int total = db.T_Product.Count();
//匿名list
var newList = proList.Select(t =& new { ID = t.ID, Sku = t.Sku, ProductName = t.ProductName, Price = t.Price, Descrtiption = t.Descrtiption }).ToList();
var json = new { total = total, rows = newList };
return Json(json, JsonRequestBehavior.AllowGet);
前端显示 时,注意JSON中的数据的大小写问题
点击排序SKU,提交请求
返回结果:
相关标签:
请登录后,发表评论
评论(Enter+Ctrl)
评论加载中...
评论加载中...
Copyright (C)
All Rights Reserved | 京ICP备 号-2首页搜索页详情页表单页
基于良无限后台系统使用BUI搭建的后台框架有以下特点:
1、灵活方便的菜单系统,功能强大的标签
2、集成了大量的业务实践和前端解决方案
3、精细的表单页、搜索页和详情页
4、丰富的文档
目前的版本是由线上使用的项目修改而来,在创建过程中可能会引入样式上的Bug
请去git hub 中提交错误,我们会持续改进,下面是发现的一些Bug,这些Bug已经在打包文件中修复
1、ie8下一级类目不透明,由于main.css中的ie透明度Alpha单词错误!
2、tab 菜单右键显示时始终显示在同一位置!
3、一级导航类目过多时,根据分辨率在最后一个类目上出现!
4、出现下拉菜单时选择时出现bug!
5、刷新标签ie7,8下出错!
6、增加配置标签不可关闭功能!
也许你会喜欢和关注与本文内容高度相关的文章:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)分享一款基于Bootstrap扁平化的后台框架Ace – 过往记忆
欢迎关注Hadoop、Spark、Flink、Hive、Hbase、Flume等大数据资料分享微信公共账号:iteblog_hadoop。
文章总数:856
浏览总数:10,461,001
评论:4877
分类目录:94 个
注册用户数:2668
最后更新:日
欢迎关注微信公共帐号:iteblog_hadoop
大数据技术博客:bigdata_ai
:开眼2.0强势回归,全面支持全平台,登陆立送超值VIP,更有红包,签到,佣金等超多新功能等你体验!官方网站:。
  最近一段时间在做一个管理系统,在网上找了很久的前端展示框架,终于找到一款基于Bootstrap的后台管理系统模版:Ace。Bootstrap是Twitter 于2010年开发出来的,用过的同学应该知道,这款不仅界面很美观,而且兼容了很多的浏览器,大大加速了我们开发网站的速度!这篇文章讲到的Ace是基于Bootstrap的,所以界面自然也非常美观,这款后台管理系统组合了好多插件以及组件,可以满足很大一部分的后台管理系统模版。废话不多说,看下界面就知道了
如果想及时了解Spark、Hadoop或者Hbase相关的文章,欢迎关注微信公共帐号:iteblog_hadoop
  该后台框架有以下几个特点:
  1、4中不同颜色的主题;
  2、响应性设计;
  3、文档很多。
  4、HTML页面主要包括:
Dashboard with stats, charts and recent events
UI elements
Form elements
Wysiwyg editor
Customizable widgets
Image gallery
Pricing tables
User profile
Login, register and forgot password
Error 404 and error 500 pages
And a few other
  5、自定义元素和插件包括:
Pure CSS3 checkbox, radio and On/Off switch elements (not available in IE8)
File input control
Simple color picker
Custom scrollbars
Onpage help to provide better help for users
  6、Bootstrap, jQuery UI 以及第三方插件包括:
jQuery UI (Custom Build)
Twitter Bootstrap
FontAwesome
Google "Open Sans" Font
jQuery Flot Charts
jQuery Sparklines
Easy Pie Chart
jQuery Knob
jQuery Validate
FuelUX (Spinner & Wizard & Treeview)
FullCalendar
jQuery ColorBox
jQuery dataTables
jQuery Chosen
jQuery Masked Input
jQuery Input Limiter
jQuery AutoSize
Bootstrap Colorpicker
Bootstrap Datepicker
Bootstrap Timepicker
Bootstrap DateRange Picker
Bootstrap Date-Time Picker
Bootbox.js
jQuery Gritter
jQuery slimScroll
jQuery UI Touch Punch
Google Code Prettify
ExplorerCanvas
Mindmup Wysiwyg Editor
Toopay Markdown Editor
X-editable
Bootstrap Tags
jQuery Mobile (Custom Build)
Dropzone.js
Nestable lists plugin
typeahead.js
Dual listbox
Multiselect
jQuery raty
  功能很强大,可以在查看:
优秀人才不缺工作机会,只缺适合自己的好机会。但是他们往往没有精力从海量机会中找到最适合的那个。
100offer 会对平台上的人才和企业进行严格筛选,让「最好的人才」和「最好的公司」相遇。
注册 100offer,谈谈你对下一份工作的期待。一周内,收到 5-10 个满足你要求的好机会!
本博客文章除特别声明,全部都是原创!
禁止个人和公司转载本文、谢谢理解:
下面文章您可能感兴趣

我要回帖

更多关于 bootstrap框架 的文章

 

随机推荐