Metrics
0
Watch 34 Star 83 Fork 15

IKKI / KendoUI-Admin-SiteJavaScriptMIT

Sign up for free
Explore and code with more than 2 million developers,Free private repositories !:)
Sign up
Kendo UI Admin & Site 是基于 Kendo UI for jQuery 和 Bootstrap 4 搭建的前台网站和后台管理框架。 spread retract

https://ikki2000.gitee.io/kendoui-admin-site/index_gitee.html

Clone or download
Loading...
README.md

LOGO

🌸 Kendo UI Admin & Site 🌌

Kendo UI Admin & Site base on Kendo UI for jQuery and Bootstrap 4.

GitHub Demo: https://ikki2000.github.io/KendoUI-Admin-Site/

码云演示:https://ikki2000.gitee.io/kendoui-admin-site/index_gitee.html

IKKI Studio GitHub license GitHub release
GitHub Repo GitHub stars GitHub forks GitHub watchers
码云仓库 Gitee stars Gitee forks Gitee watchers Gitee star Gitee fork
jQuery Kendo UI Bootstrap Font Awesome
Internet Explorer Microsoft Edge Mozilla Firefox Google Chrome Safari Opera
GitHub top language GitHub language count GitHub HTML count GitHub CSS count GitHub JavaScript count GitHub code size in bytes GitHub repo size in bytes
GitHub contributors GitHub last commit GitHub commit activity
Default Brown Pink Red Orange Yellow White Grass Green Cyan Blue Purple Black Gray

Home

Forms

Grid

Themes

🌟 特点 Features

🌐 浏览器支持 Browser Support

  • 现代浏览器和 IE10 及以上
IE
IE
Edge
Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
Opera
Opera
10, 11 last 2 versions last 2 versions last 2 versions last 2 versions last 2 versions

📖 使用指南 Initialization

  1. 下载并解压至项目目录~
  2. 将下列 5 个 HTML 文件的 <base> 修改为前端本地的开发路径~
    index.html
    --- <base href="https://ikki2000.github.io/KendoUI-Admin-Site/">
    +++ <base href="http://localhost:8888/YourProject/">
    
    admin/login.html & admin/index.html
    --- <base href="https://ikki2000.github.io/KendoUI-Admin-Site/" type="admin">
    +++ <base href="http://localhost:8888/YourProject/" type="admin">
    
    site/login.html & site/index.html
    --- <base href="https://ikki2000.github.io/KendoUI-Admin-Site/" type="site">
    +++ <base href="http://localhost:8888/YourProject/" type="site">

    注意:最后的 / 不要漏掉~

  3. 将下列 JS 文件的 apiPath 修改为后端服务器的 API 接口路径~ 并恢复 3 个默认参数~
    js/ikki.js
    
    // 配置接口路径
    --- var apiPath = 'https://ikki2000.github.io/KendoUI-Admin-Site/';
    +++ var apiPath = 'https://dev.YourDomain.com/api/';
    
    // Ajax 提交
    --- ajaxType: 'get', // GitHub Pages 演示只支持 get 请求,正常使用请改回 post 请求
    +++ ajaxType: 'post',
    --- urlType: 'static', // GitHub Pages 演示接口为静态 json 文件,正常使用请改回 api 类型
    +++ urlType: 'api',
    
    // 带二进制流的 Ajax 提交
    --- ajaxType: 'get', // GitHub Pages 演示只支持 get 请求,正常使用请改回 post 请求
    +++ ajaxType: 'post',
  4. 用 IDE 编辑器(如:WebStorm)打开 index.html 并选择浏览器启动本地服务即可~
    http://localhost:8888/YourProject/index.html

🔨 开发指南 Developer's Guide

  • 所有的子页面模块均存放在 views 目录或其自定义的子目录下

  • 每一个子页面模块均由同名的 xxx.htmlxxx.js 两个文件组成

  • 每一个子页面模块的 HTML 页面第一行的模版 ID 由文件名 xxxTemp 组成

    <script id="xxxTemp" type="text/x-kendo-template">
  • 只应用于当前子页面模块的样式写在模块的 HTML 文件中

    <style scoped>
        ···
    </style>
  • 子页面模块的 HTML 文件基本结构如下:

    <script id="xxxTemp" type="text/x-kendo-template">
        <div>
            ···
        </div>
        <script id="otherTemplate" type="text/x-kendo-template">
            ···
        </script>
        <style scoped>
            ···
        </style>
    </script>
  • 只应用于当前子页面模块的 JS 插件通过模块的 JS 文件引入

    $.getScript(path + 'js/plugin.min.js');
  • 顶部菜单本地 Mock 数据位于 json/menu.json 其数据结构同左侧导航

  • 左侧导航本地 Mock 数据位于 json/nav.json 其中 text 键值说明如下:

    • <i> 为图标
    • <sup> 为折叠后的角标
    • <abbr> 包裹折叠后一级导航不显示的文字部分
    • <small> 为可选次级文字
    • <sub> 为角标
  • 左侧导航 url 键值包含的 linkTo 方法为路由函数
    其中第一个参数为子页面模块相对于 views 目录所在的目录
    第二个参数为子页面模块的名称
    cssClass 键值为面包屑要用到的 DOM 定位,由 links-模块名称 组成

  • 顶部菜单、左侧导航及 Token 验证的 API 接口地址位于 ikki.layout.js 文件内

  • ikki.js 文件内封装了一些公用方法,具体参数及说明如下:

    方法 参数 类型 默认值 说明
    $.fn.ajaxPost --- --- --- 封装的带 token 的 ajax 提交
    ajaxAsync boolean true ajax 的 async 属性
    ajaxType string 'post' ajax 的 type 属性
    ajaxData string '' JSON.stringify() 封装的 ajax 的 data 属性
    urlType string 'api' 读取本地 json 的时候换成 'static'
    ajaxUrl string '' ajax 的 url 属性
    ajaxContentType string 'application/json; charset=UTF-8' ajax 的 contentType 属性
    finished function {} ajax 请求完成时的回调
    succeed function {} ajax 请求完成并且 result === 'y' 时的回调
    failed function {} ajax 请求完成并且 result === 'n' 时的回调
    isMsg boolean false result === 'y' 时是否需要消息提示
    $.fn.ajaxPostBlob --- --- --- 封装的带 token 的二进制流 ajax 提交
    ajaxAsync boolean true ajax 的 async 属性
    ajaxType string 'post' ajax 的 type 属性
    ajaxData string '' new FormData() 封装的 ajax 的 data 属性
    ajaxUrl string '' ajax 的 url 属性
    finished function {} ajax 请求完成时的回调
    succeed function {} ajax 请求完成并且 result === 'y' 时的回调
    failed function {} ajax 请求完成并且 result === 'n' 时的回调
    isMsg boolean true result === 'y' 时是否需要消息提示
    tipMsg --- --- --- 提示框
    dom object --- 触发提示框的 DOM 对象
    msg string --- 提示框显示的内容
    position string --- 提示框的位置:
    'top'
    'bottom'
    'left'
    'right'
    'center'
    noticeMsg --- --- --- 通知框
    msg string --- 通知框显示的内容
    type string --- 通知框的类型:
    'info'
    'success'
    'warning'
    'error'
    position string --- 通知框的位置:
    'center'
    'top'
    'left'
    'right'
    'bottom'
    'left top'
    'right top'
    'left bottom'
    'right bottom'
    time number --- 自动消失的时间
    单位:ms
    hided function --- 通知框消失后的回调
    alertMsg --- --- --- 警告框
    alertMsgBtn --- --- --- 警告框小按钮
    alertMsgNoBtn --- --- --- 警告框无按钮
    msg string --- 警告框显示的内容
    type string --- 警告框的类型:
    'success'
    'info'
    'question'
    'warning'
    'error'
    closed function --- 警告框关闭后的回调
    confirmMsg --- --- --- 确认框
    confirmMsgBtn --- --- --- 确认框小按钮
    title string --- 确认框显示的标题
    msg string --- 确认框显示的内容
    type string --- 确认框的类型:
    'success'
    'info'
    'question'
    'warning'
    'error'
    confirmed function --- 确认框确认后的回调
    divWindow --- --- --- 弹出层
    title string --- 弹出层显示的标题
    width string --- 弹出层宽度
    单位:px 或 %
    height string --- 弹出层高度
    单位:px 或 %
    content object --- 弹出层显示的 DOM 对象
    iframeWindow --- --- --- 弹出页
    title string --- 弹出页显示的标题
    width string --- 弹出页宽度
    单位:px 或 %
    height string --- 弹出页高度
    单位:px 或 %
    url string --- 弹出页显示的 iFrame 链接地址
    showBigPic --- --- --- 大图预览
    url string --- 大图的绝对路径
    numericRange --- --- --- 数字型范围
    rangeStart object --- 开始的 DOM 对象
    rangeEnd object --- 结束的 DOM 对象
    format string --- 格式
    decimals number --- 保留几位小数
    step number --- 步进
    min number --- 最小值
    max number --- 最大值
    dateRange --- --- --- 日期型范围
    dateInputRange --- --- --- 日期输入型范围
    rangeStart object --- 开始的 DOM 对象
    rangeEnd object --- 结束的 DOM 对象
    type string --- 日期的类型:
    'Year'
    'Month'
    'Time'
    'DateTime'
    'Date'
    serializeObject --- --- --- 表单序列化 json 对象

前后端交互规范:

  • 前后端交互全部采用 Ajax 方式提交
  • 前后端 token 均通过 headerAuthorization 属性交互
  • 前端提交给后端的数据格式分为标准的 json 格式和带二进制流的 form data 格式两种
  • 后端返回给前端的 json 格式标准如下:
    {
        "result": "y",
        "msg": "操作成功!",
        "data": []
    }
  • Token 验证不通过时返回:
    {
        "result": "denied"
    }
  • 所有日期 date 类型的数据全部转换成字符串 string 类型进行交互,即前端给到后端和后端给到前端的数据均为字符串
    {
        "year": "2019",
        "month": "2019-02",
        "date": "2019-02-03",
        "time": "12:00", 
        "datetime": "2019-02-03 12:00" 
    }
  • 所有组件交互的数据格式请参考前端 Mock 数据目录 json/

📜 目录结构 Directory Structure

完整版:

后台默认使用的是路由版~ 如需使用框架版、标签版和布局版,请直接将对应的 index_xxx.html 启动或直接改名为 index.html 即可~

ROOT/··················································(项目根目录)
├── admin/·············································(后台管理目录)
│   ├── pages/·········································(iFrame 框架版目录)
│   │   ├── 404.html···································(404 页面)
│   │   ├── home.html··································(主页)
│   ├── views/·········································(SPA 路由版和标签版目录)
│   │   ├── xxx/·······································(后台管理子目录)
│   │   │   ├── xxx.html·······························(后台管理子页面及样式)
│   │   │   └── xxx.js·································(后台管理子页面脚本)
│   │   ├── 404.html···································(404页面及样式)
│   │   ├── 404.js·····································(404页面脚本)
│   │   ├── home.html··································(主页页面及样式)
│   │   └── home.js····································(主页页面脚本)
│   ├── index.html·····································(后台登录后首页)
│   ├── index_iframe.html······························(首页框架版)
│   ├── index_router.html······························(首页路由版)
│   ├── index_splitter_iframe.html·····················(首页布局框架版)
│   ├── index_splitter_router.html·····················(首页布局路由版)
│   ├── index_splitter_tabstrip.html···················(首页布局标签版)
│   ├── index_tabstrip.html····························(首页标签版)
│   └── login.html·····································(后台登录页)
├── css/···············································(样式表目录)
│   ├── themes/········································(配色皮肤目录)
│   ├── amikoko.admin.css······························(后台管理样式)
│   ├── amikoko.site.css·······························(前台网站样式)
│   ├── bootstrap.min.css······························(Bootstrap 4)
│   ├── flag-icon.min.css······························(矢量国旗图标)
│   ├── fontawesome-all.min.css························(字体图标)
│   └── kendo.ui.widgets.icon.css······················(Kendo UI 组件图标)
├── flags/·············································(矢量国旗图标目录)
├── fonts/·············································(字体图标目录)
├── img/···············································(图片目录)
│   ├── avatar.png·····································(默认头像)
│   ├── favicon.png····································(浏览器标签及收藏夹图标)
│   ├── IKKI.png·······································(用户头像)
│   ├── lock_bg.jpg····································(锁屏背景)
│   ├── logo.png·······································(标准 LOGO)
│   └── logo_s.png·····································(左侧导航折叠后 LOGO)
├── js/················································(公用脚本目录)
│   ├── global/········································(多语言目录)
│   ├── countUp.min.js·································(数字跳动)
│   ├── ikki.iframe.js·································(框架版脚本)
│   ├── ikki.js········································(公用脚本)
│   ├── ikki.layout.js·································(后台公用脚本)
│   ├── ikki.router.js·································(路由脚本)
│   ├── ikki.splitter.js·······························(布局版脚本)
│   ├── ikki.tabstrip.js·······························(标签版脚本)
│   ├── ikki.website.js································(前台公用脚本)
│   ├── jquery.min.js··································(jQuery 库)
│   ├── jquery.particleground.js·······················(登录页背景动画)
│   ├── jquery.verify.js·······························(登录页滑动验证)
│   ├── jszip.min.js···································(Excel 导出)
│   └── kendo.all.min.js·······························(Kendo UI 库)
├── json/··············································(本地 Mock 数据目录)
│   └── geo/···········································(地图 GEO 数据目录)
├── resource/··········································(其他静态资源目录)
├── site/··············································(前台网站目录)
│   ├── pages/·········································(iFrame 框架版目录)
│   │   ├── 404.html···································(404 页面)
│   │   ├── home.html··································(主页)
│   ├── views/·········································(SPA 路由版和标签版目录)
│   │   ├── xxx/·······································(前台网站子目录)
│   │   │   ├── xxx.html·······························(前台网站子页面及样式)
│   │   │   └── xxx.js·································(前台网站子页面脚本)
│   │   ├── 404.html···································(404页面及样式)
│   │   ├── 404.js·····································(404页面脚本)
│   │   ├── home.html··································(主页页面及样式)
│   │   └── home.js····································(主页页面脚本)
│   └── index.html·····································(前台首页)
├── index.html·········································(项目首页)
├── LICENSE············································(MIT)
└── README.md··········································(本说明文档)

纯后台管理路由精简版:

如果只需要后台管理界面的路由版~ 可将原 admin 目录下的文件移动至根目录并按照如下目录结构删除多余的文件~ 且将 login.htmlindex.html 头部 <base> 标签内的 type 置空即可~

    <base href="http://localhost:8888/YourProject/" type="">
ROOT/··················································(项目根目录)
├── css/···············································(样式表目录)
│   ├── themes/········································(配色皮肤目录)
│   │   └── theme_default.min.css······················(只保留默认样式)
│   ├── amikoko.admin.css······························(后台管理样式)
│   ├── bootstrap.min.css······························(Bootstrap 4)
│   └── fontawesome-all.min.css························(字体图标)
├── fonts/·············································(字体图标目录)
├── img/···············································(图片目录)
│   ├── avatar.png·····································(默认头像)
│   ├── favicon.png····································(浏览器标签及收藏夹图标)
│   ├── logo.png·······································(标准 LOGO)
│   └── logo_s.png·····································(左侧导航折叠后 LOGO)
├── js/················································(公用脚本目录)
│   ├── global/········································(多语言目录)
│   │   └── kendo.zh-CHS.js····························(只保留简体中文)
│   ├── countUp.min.js·································(数字跳动)
│   ├── ikki.js········································(后台管理脚本)
│   ├── ikki.layout.js·································(框架脚本)
│   ├── ikki.router.js·································(路由脚本)
│   ├── jquery.min.js··································(jQuery 库)
│   ├── jquery.verify.js·······························(登录页滑动验证)
│   ├── jszip.min.js···································(Excel 导出)
│   └── kendo.all.min.js·······························(Kendo UI 库)
├── json/··············································(本地 Mock 数据目录)
├── views/·············································(SPA 页面目录)
│   ├── xxx/···········································(子目录)
│   │   ├── xxx.html···································(子页面及样式)
│   │   └── xxx.js·····································(子页面脚本)
│   ├── 404.html·······································(404页面及样式)
│   ├── 404.js·········································(404页面脚本)
│   ├── home.html······································(主页页面及样式)
│   └── home.js········································(主页页面脚本)
├── index.html·········································(登录后首页)
└── login.html·········································(后台入口登录页)

📁 功能列表 Function List

顶部菜单 [ Menu ]

  • 导航折叠 [ Navigation Drawer ]
  • 面包屑 [ Breadcrumb ]
  • 刷新 [ Refresh ]
  • 全屏 [ Full Screen ]
  • 锁屏 [ Lock Screen ]
  • 配色 [ Theme ]
  • 语言 [ Localization ]
  • 消息 [ Message ]
  • 提醒 [ Notice ]
  • 用户名头像显示 [ User Name & Avatar ]
  • 前台切换 [ Goto Website ]
  • 用户中心 [ User Center ]
  • 修改密码 [ Change Password ]
  • 系统设置 [ Setting ]
  • 退出登录 [ Sign Out ]

左侧导航 [ Navigation ]

  • 综合 [ Dashboard ]
    • 表单 [ Forms ]
      • 基础表单元素
      • 表单 Post 提交
      • 表单 Ajax 提交
      • 范围选择
      • 下拉分组多选级联
      • 地图联动选择
    • 表格 [ Grids ]
      • 全功能搜索及自定义编辑
      • 弹出框带校验编辑
      • 行内带校验编辑
      • 单元格带校验编辑
      • 复制新增及数据联动编辑
      • 自定义功能按钮
      • 自定义选择提交
      • 分组合计排序筛选
      • 子表详情及滚动翻页
      • 合并表头及行内拆分
    • 树形 [ Trees ]
      • 全功能拖放及自定义编辑
      • 节点选择编辑
      • 自定义图标
      • 复选框及半选提交
    • 列表 [ Lists ]
      • 全功能排版及自定义编辑
      • 多模块自定义排版
      • 大图列表切换
      • 间隔项模版
    • 分配 [ Assigns ]
      • 表格搜索双击选择
      • 树形直接拖放
      • 树形同级双击选择
      • 列表搜索双击选择
      • 穿梭框拖放
  • 框架 [ Framework ]
    • 全球化 [ Globalization ]
    • 视图模型 [ MVVM ]
    • 数据源 [ DataSource ]
    • 模版 [ Templates ]
    • 绘图 [ Drawing ]
    • 单页应用 [ SPA ]
    • PDF导出 [ PDF Export ]
    • 触摸事件 [ Touch Events ]
    • 整合 [ Integration ]
  • 布局 [ Layout ]
    • 页面布局 [ Splitter ]
    • 响应面板 [ Responsive Panel ]
    • 模态框 [ Window ]
    • 对话框 [ Dialog ]
    • 通知框 [ Notification ]
    • 提示框 [ Tooltip ]
  • 导航 [ Navigation ]
    • 菜单 [ Menu ]
    • 折叠面板 [ PanelBar ]
    • 选项卡 [ TabStrip ]
    • 工具栏 [ ToolBar ]
    • 树形视图 [ TreeView ]
    • 按钮 [ Button ]
    • 按钮组 [ ButtonGroup ]
  • 表单 [ Forms ]
    • 转换框 [ Switch ]
    • 数字框 [ NumericTextBox ]
    • 日期框 [ DatePicker ]
    • 日期范围框 [ DateRangePicker ]
    • 时间框 [ TimePicker ]
    • 时日框 [ DateTimePicker ]
    • 时日掩码框 [ DateInput ]
    • 掩码框 [ MaskedTextBox ]
    • 自动完成框 [ AutoComplete ]
    • 单选下拉框 [ DropDownList ]
    • 输入下拉框 [ ComboBox ]
    • 表格下拉框 [ MultiColumnComboBox ]
    • 多选下拉框 [ MultiSelect ]
    • 树形下拉框 [ DropDownTree ]
    • 颜色框 [ ColorPicker ]
    • 滑块框 [ Slider ]
    • 进度框 [ ProgressBar ]
    • 穿梭框 [ ListBox ]
    • 富文本框 [ Editor ]
    • 上传框 [ Upload ]
    • 验证 [ Validator ]
  • 数据 [ Data ]
    • 表格 [ Grid ]
    • 树形列表 [ TreeList ]
    • 列表视图 [ ListView ]
    • 电子表格 [ Spreadsheet ]
    • 透视表格 [ PivotGrid ]
  • 日程 [ Scheduling ]
    • 日历 [ Calendar ]
    • 多重日历 [ MultiViewCalendar ]
    • 日程表 [ Scheduler ]
    • 甘特图 [ Gantt ]
  • 会话 [ Conversational ]
    • 聊天 [ Chat ]
  • 媒体 [ Media ]
    • 媒体播放器 [ MediaPlayer ]
    • 滚动视图 [ ScrollView ]
  • 交互 [ Interactivity ]
    • 拖放 [ Drag and Drop ]
    • 拖放排序 [ Sortable ]
    • 样式 [ Styling ]
    • 特效 [ Effects ]
    • 波纹效果 [ Ripple Container ]
  • 图表 [ Charts ]
    • 区域图 [ Area Charts ]
    • 条形图 [ Bar Charts ]
    • 箱线图 [ Box Plot Charts ]
    • 气泡图 [ Bubble Charts ]
    • 子弹图 [ Bullet Charts ]
    • 环形图 [ Donut Charts ]
    • 漏斗图 [ Funnel Charts ]
    • 折线图 [ Line Charts ]
    • 饼图 [ Pie Charts ]
    • 极坐标图 [ Polar Charts ]
    • 雷达图 [ Radar Charts ]
    • 散点图 [ Scatter Charts ]
    • 波形图 [ Sparklines ]
    • 股票图 [ Stock Charts ]
    • 树图 [ TreeMap ]
    • 瀑布图 [ Waterfall Charts ]
    • 范区域图 [ Range Area Charts ]
    • 范条形图 [ Range Bar Charts ]
    • 量规 [ Gauges ]
      • 线性计 [ Linear Gauge ]
      • 径向计 [ Radial Gauge ]
      • 弧形计 [ Arc Gauge ]
    • 条码 [ Barcodes ]
      • 条形码 [ Barcode ]
      • 二维码 [ QR Code ]
    • 地图 [ Maps ]
      • 架构图 [ Diagram ]
      • 地图 [ Map ]
  • 移动端 [ Hybrid ]
    • 敬请期待……

🔗 相关链接 Thanks for

📷 界面预览 Screenshot

-= PC =-

PC

-= PAD =-

PAD

-= PHONE =-

PHONE

Comments ( 20 )

You need to Sign in for post a comment

Help Search