网站内如何做论坛专业网站建设费用包括

网站内如何做论坛,专业网站建设费用包括,全网营销代运营,织梦系统做的网站打开慢jQuery EasyUI 数据网格 - 创建复杂工具栏 datagrid 的工具栏#xff08;toolbar#xff09;支持非常灵活的布局#xff0c;可以创建包含多行按钮、分隔线、下拉菜单、搜索框、分页自定义、状态显示等的复杂工具栏。这在实际后台管理系统中非常常见#xff0c;能让操作区更…jQuery EasyUI 数据网格 - 创建复杂工具栏datagrid的工具栏toolbar支持非常灵活的布局可以创建包含多行按钮、分隔线、下拉菜单、搜索框、分页自定义、状态显示等的复杂工具栏。这在实际后台管理系统中非常常见能让操作区更专业、功能更丰富。官方参考复杂工具栏示例https://www.jeasyui.com/tutorial/datagrid/datagrid5.php在线 Demohttps://www.jeasyui.com/demo/main/index.php?pluginDataGridpitemCustomToolbar步骤 1: 引入 EasyUI 资源linkrelstylesheettypetext/csshrefhttps://www.jeasyui.com/easyui/themes/default/easyui.csslinkrelstylesheettypetext/csshrefhttps://www.jeasyui.com/easyui/themes/icon.cssscripttypetext/javascriptsrchttps://code.jquery.com/jquery-1.12.4.min.js/scriptscripttypetext/javascriptsrchttps://www.jeasyui.com/easyui/jquery.easyui.min.js/script步骤 2: 创建复杂工具栏多行 多种控件!-- 复杂工具栏 --dividtoolbarstylepadding:8px;background:#fafafa;border-bottom:1px solid #ddd;!-- 第一行主要操作按钮 下拉菜单 --divstylemargin-bottom:6px;ahrefjavascript:void(0)classeasyui-linkbuttoniconClsicon-addplaintrueonclicknewUser()新增用户/aahrefjavascript:void(0)classeasyui-linkbuttoniconClsicon-editplaintrueonclickeditUser()编辑/aahrefjavascript:void(0)classeasyui-linkbuttoniconClsicon-removeplaintrueonclickdeleteUser()删除/aahrefjavascript:void(0)classeasyui-splitbuttondata-optionsmenu:#exportMenu,iconCls:icon-export,plain:true导出/aahrefjavascript:void(0)classeasyui-menubuttondata-optionsmenu:#moreMenu,iconCls:icon-more,plain:true更多操作/aspanclasstoolbar-separatorstylemargin:0 10px;color:#ccc;|/spanahrefjavascript:void(0)classeasyui-linkbuttoniconClsicon-reloadplaintrueonclickreload()刷新/aahrefjavascript:void(0)classeasyui-linkbuttoniconClsicon-tipplaintrueonclickshowHelp()帮助/a/div!-- 第二行高级搜索 状态显示 --divstylemargin-top:6px;span用户名/spaninputidsearch_usernameclasseasyui-textboxstylewidth:120px;prompt模糊搜索spanstylemargin-left:10px;状态/spanselectidsearch_statusclasseasyui-comboboxstylewidth:100px;data-optionspanelHeight:autooptionvalue全部/optionoptionvalue1启用/optionoptionvalue0禁用/option/selectspanstylemargin-left:10px;注册日期/spaninputidsearch_startclasseasyui-dateboxstylewidth:110px;span~/spaninputidsearch_endclasseasyui-dateboxstylewidth:110px;ahrefjavascript:void(0)classeasyui-linkbuttoniconClsicon-searchstylemargin-left:10px;onclickdoSearch()查询/aahrefjavascript:void(0)classeasyui-linkbuttonplaintrueonclickclearSearch()清空/a!-- 右侧状态信息 --divstylefloat:right;color:#666;font-size:12px;line-height:28px;共spanidtotalCount0/span条记录 已选中spanidselectedCount0/span条/divdivstyleclear:both;/div/div/div!-- 导出下拉菜单 --dividexportMenuclasseasyui-menustylewidth:120px;divonclickexportExcel()导出 Excel/divdivonclickexportPDF()导出 PDF/divdivonclickexportCSV()导出 CSV/div/div!-- 更多操作菜单 --dividmoreMenuclasseasyui-menustylewidth:150px;diviconClsicon-lock批量启用/divdiviconClsicon-unlock批量禁用/divdivclassmenu-sep/divdiviconClsicon-email发送邮件/div/div!-- 数据网格 --tableiddgclasseasyui-datagridtitle用户管理stylewidth:100%;height:500pxdata-optionsurl:get_users.php,fitColumns:true,singleSelect:false,pagination:true,rownumbers:true,toolbar:#toolbartheadtrthfieldckcheckboxtrue/ththfieldidwidth80ID/ththfieldusernamewidth100用户名/ththfieldnamewidth100姓名/ththfieldemailwidth180邮箱/ththfieldstatuswidth80formatterformatStatus状态/ththfieldregdatewidth100注册日期/th/tr/thead/table步骤 3: JavaScript 实现复杂功能scripttypetext/javascript$(function(){// 加载完成后更新总数$(#dg).datagrid({onLoadSuccess:function(data){$(#totalCount).text(data.total);},onSelect:updateSelectedCount,onUnselect:updateSelectedCount,onSelectAll:updateSelectedCount,onUnselectAll:updateSelectedCount});functionupdateSelectedCount(){varrows$(#dg).datagrid(getSelections);$(#selectedCount).text(rows.length);}});// 查询functiondoSearch(){$(#dg).datagrid(load,{username:$(#search_username).val(),status:$(#search_status).combobox(getValue),startdate:$(#search_start).datebox(getValue),enddate:$(#search_end).datebox(getValue)});}// 清空搜索functionclearSearch(){$(#search_username).textbox(clear);$(#search_status).combobox(setValue,);$(#search_start).datebox(clear);$(#search_end).datebox(clear);$(#dg).datagrid(load,{});}// 状态格式化functionformatStatus(value){returnvalue1?span stylecolor:green;启用/span:span stylecolor:red;禁用/span;}// 导出示例functionexportExcel(){$.messager.alert(导出,正在导出为 Excel...);}functionexportPDF(){$.messager.alert(导出,正在导出为 PDF...);}// 其他操作functionnewUser(){$.messager.alert(新增,打开新增窗口);}functioneditUser(){$.messager.alert(编辑,打开编辑窗口);}functiondeleteUser(){$.messager.confirm(确认,确定删除选中记录吗,function(r){if(r){$.messager.show({title:成功,msg:删除成功});}});}functionreload(){$(#dg).datagrid(reload);}functionshowHelp(){$.messager.alert(帮助,这是帮助信息);}/script关键特性总结多行布局使用div分隔多行工具。下拉菜单使用splitbutton和menubutton实现导出、更多操作。搜索区多个输入框 查询/清空按钮。状态显示实时显示总记录数和选中数。美化使用plaintrue、分隔线、浮动布局。效果一个专业、功能齐全的复杂工具栏支持CRUD 操作批量导出下拉选择格式高级多条件搜索实时状态统计更多扩展操作更多示例官方复杂工具栏https://www.jeasyui.com/tutorial/datagrid/datagrid5.php自定义分页器 工具栏https://www.jeasyui.com/demo/main/index.php?pluginDataGridpitemCustomPager如果需要导入功能、自定义分页器、权限控制显示按钮、或响应式工具栏请继续提问