若依 3.4
This commit is contained in:
RuoYi
parent
dfd65fbeb8
commit
36738bca90
4
pom.xml
4
pom.xml
|
|
@ -6,14 +6,14 @@
|
|||
|
||||
<groupId>com.ruoyi</groupId>
|
||||
<artifactId>ruoyi</artifactId>
|
||||
<version>3.3</version>
|
||||
<version>3.4</version>
|
||||
|
||||
<name>ruoyi</name>
|
||||
<url>http://www.ruoyi.vip</url>
|
||||
<description>若依管理系统</description>
|
||||
|
||||
<properties>
|
||||
<ruoyi.version>3.3</ruoyi.version>
|
||||
<ruoyi.version>3.4</ruoyi.version>
|
||||
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
|
||||
<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
|
||||
<java.version>1.8</java.version>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<parent>
|
||||
<artifactId>ruoyi</artifactId>
|
||||
<groupId>com.ruoyi</groupId>
|
||||
<version>3.3</version>
|
||||
<version>3.4</version>
|
||||
</parent>
|
||||
<modelVersion>4.0.0</modelVersion>
|
||||
<packaging>jar</packaging>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,80 @@
|
|||
package com.ruoyi.web.controller.demo.controller;
|
||||
|
||||
import org.springframework.stereotype.Controller;
|
||||
import org.springframework.web.bind.annotation.GetMapping;
|
||||
import org.springframework.web.bind.annotation.RequestMapping;
|
||||
|
||||
/**
|
||||
* 模态窗口
|
||||
*
|
||||
* @author ruoyi
|
||||
*/
|
||||
@Controller
|
||||
@RequestMapping("/demo/modal")
|
||||
public class DemoDialogController
|
||||
{
|
||||
private String prefix = "demo/modal";
|
||||
|
||||
/**
|
||||
* 模态窗口
|
||||
*/
|
||||
@GetMapping("/dialog")
|
||||
public String dialog()
|
||||
{
|
||||
return prefix + "/dialog";
|
||||
}
|
||||
|
||||
/**
|
||||
* 弹层组件
|
||||
*/
|
||||
@GetMapping("/layer")
|
||||
public String layer()
|
||||
{
|
||||
return prefix + "/layer";
|
||||
}
|
||||
|
||||
/**
|
||||
* 表单
|
||||
*/
|
||||
@GetMapping("/form")
|
||||
public String form()
|
||||
{
|
||||
return prefix + "/form";
|
||||
}
|
||||
|
||||
/**
|
||||
* 表格
|
||||
*/
|
||||
@GetMapping("/table")
|
||||
public String table()
|
||||
{
|
||||
return prefix + "/table";
|
||||
}
|
||||
|
||||
/**
|
||||
* 表格check
|
||||
*/
|
||||
@GetMapping("/check")
|
||||
public String check()
|
||||
{
|
||||
return prefix + "/table/check";
|
||||
}
|
||||
|
||||
/**
|
||||
* 表格radio
|
||||
*/
|
||||
@GetMapping("/radio")
|
||||
public String radio()
|
||||
{
|
||||
return prefix + "/table/radio";
|
||||
}
|
||||
|
||||
/**
|
||||
* 表格回传父窗体
|
||||
*/
|
||||
@GetMapping("/parent")
|
||||
public String parent()
|
||||
{
|
||||
return prefix + "/table/parent";
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,243 @@
|
|||
package com.ruoyi.web.controller.demo.controller;
|
||||
|
||||
import java.util.ArrayList;
|
||||
import java.util.List;
|
||||
import org.springframework.stereotype.Controller;
|
||||
import org.springframework.web.bind.annotation.GetMapping;
|
||||
import org.springframework.web.bind.annotation.RequestMapping;
|
||||
import org.springframework.web.bind.annotation.ResponseBody;
|
||||
import com.ruoyi.common.core.domain.AjaxResult;
|
||||
|
||||
/**
|
||||
* 表单相关
|
||||
*
|
||||
* @author ruoyi
|
||||
*/
|
||||
@Controller
|
||||
@RequestMapping("/demo/form")
|
||||
public class DemoFormController
|
||||
{
|
||||
private String prefix = "demo/form";
|
||||
|
||||
private final static List<UserFormModel> users = new ArrayList<UserFormModel>();
|
||||
{
|
||||
users.add(new UserFormModel(1, "1000001", "测试1", "15888888888"));
|
||||
users.add(new UserFormModel(2, "1000002", "测试2", "15666666666"));
|
||||
users.add(new UserFormModel(3, "1000003", "测试3", "15666666666"));
|
||||
users.add(new UserFormModel(4, "1000004", "测试4", "15666666666"));
|
||||
users.add(new UserFormModel(5, "1000005", "测试5", "15666666666"));
|
||||
}
|
||||
|
||||
/**
|
||||
* 按钮页
|
||||
*/
|
||||
@GetMapping("/button")
|
||||
public String button()
|
||||
{
|
||||
return prefix + "/button";
|
||||
}
|
||||
|
||||
/**
|
||||
* 下拉框
|
||||
*/
|
||||
@GetMapping("/select")
|
||||
public String select()
|
||||
{
|
||||
return prefix + "/select";
|
||||
}
|
||||
|
||||
/**
|
||||
* 表单校验
|
||||
*/
|
||||
@GetMapping("/validate")
|
||||
public String validate()
|
||||
{
|
||||
return prefix + "/validate";
|
||||
}
|
||||
|
||||
/**
|
||||
* 功能扩展（包含文件上传）
|
||||
*/
|
||||
@GetMapping("/jasny")
|
||||
public String jasny()
|
||||
{
|
||||
return prefix + "/jasny";
|
||||
}
|
||||
|
||||
/**
|
||||
* 拖动排序
|
||||
*/
|
||||
@GetMapping("/sortable")
|
||||
public String sortable()
|
||||
{
|
||||
return prefix + "/sortable";
|
||||
}
|
||||
|
||||
/**
|
||||
* 选项卡 & 面板
|
||||
*/
|
||||
@GetMapping("/tabs_panels")
|
||||
public String tabs_panels()
|
||||
{
|
||||
return prefix + "/tabs_panels";
|
||||
}
|
||||
|
||||
/**
|
||||
* 栅格
|
||||
*/
|
||||
@GetMapping("/grid")
|
||||
public String grid()
|
||||
{
|
||||
return prefix + "/grid";
|
||||
}
|
||||
|
||||
/**
|
||||
* 表单向导
|
||||
*/
|
||||
@GetMapping("/wizard")
|
||||
public String wizard()
|
||||
{
|
||||
return prefix + "/wizard";
|
||||
}
|
||||
|
||||
/**
|
||||
* 文件上传
|
||||
*/
|
||||
@GetMapping("/upload")
|
||||
public String upload()
|
||||
{
|
||||
return prefix + "/upload";
|
||||
}
|
||||
|
||||
/**
|
||||
* 日期和时间页
|
||||
*/
|
||||
@GetMapping("/datetime")
|
||||
public String datetime()
|
||||
{
|
||||
return prefix + "/datetime";
|
||||
}
|
||||
|
||||
/**
|
||||
* 左右互选组件
|
||||
*/
|
||||
@GetMapping("/duallistbox")
|
||||
public String duallistbox()
|
||||
{
|
||||
return prefix + "/duallistbox";
|
||||
}
|
||||
|
||||
/**
|
||||
* 基本表单
|
||||
*/
|
||||
@GetMapping("/basic")
|
||||
public String basic()
|
||||
{
|
||||
return prefix + "/basic";
|
||||
}
|
||||
|
||||
/**
|
||||
* 搜索自动补全
|
||||
*/
|
||||
@GetMapping("/autocomplete")
|
||||
public String autocomplete()
|
||||
{
|
||||
return prefix + "/autocomplete";
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取用户数据
|
||||
*/
|
||||
@GetMapping("/userModel")
|
||||
@ResponseBody
|
||||
public AjaxResult userModel()
|
||||
{
|
||||
AjaxResult ajax = new AjaxResult();
|
||||
|
||||
ajax.put("code", 200);
|
||||
ajax.put("value", users);
|
||||
return ajax;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取数据集合
|
||||
*/
|
||||
@GetMapping("/collection")
|
||||
@ResponseBody
|
||||
public AjaxResult collection()
|
||||
{
|
||||
String[] array = { "ruoyi 1", "ruoyi 2", "ruoyi 3", "ruoyi 4", "ruoyi 5" };
|
||||
AjaxResult ajax = new AjaxResult();
|
||||
ajax.put("value", array);
|
||||
return ajax;
|
||||
}
|
||||
}
|
||||
|
||||
class UserFormModel
|
||||
{
|
||||
/** 用户ID */
|
||||
private int userId;
|
||||
|
||||
/** 用户编号 */
|
||||
private String userCode;
|
||||
|
||||
/** 用户姓名 */
|
||||
private String userName;
|
||||
|
||||
/** 用户手机 */
|
||||
private String userPhone;
|
||||
|
||||
public UserFormModel()
|
||||
{
|
||||
|
||||
}
|
||||
|
||||
public UserFormModel(int userId, String userCode, String userName, String userPhone)
|
||||
{
|
||||
this.userId = userId;
|
||||
this.userCode = userCode;
|
||||
this.userName = userName;
|
||||
this.userPhone = userPhone;
|
||||
}
|
||||
|
||||
public int getUserId()
|
||||
{
|
||||
return userId;
|
||||
}
|
||||
|
||||
public void setUserId(int userId)
|
||||
{
|
||||
this.userId = userId;
|
||||
}
|
||||
|
||||
public String getUserCode()
|
||||
{
|
||||
return userCode;
|
||||
}
|
||||
|
||||
public void setUserCode(String userCode)
|
||||
{
|
||||
this.userCode = userCode;
|
||||
}
|
||||
|
||||
public String getUserName()
|
||||
{
|
||||
return userName;
|
||||
}
|
||||
|
||||
public void setUserName(String userName)
|
||||
{
|
||||
this.userName = userName;
|
||||
}
|
||||
|
||||
public String getUserPhone()
|
||||
{
|
||||
return userPhone;
|
||||
}
|
||||
|
||||
public void setUserPhone(String userPhone)
|
||||
{
|
||||
this.userPhone = userPhone;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
package com.ruoyi.web.controller.demo.controller;
|
||||
|
||||
import org.springframework.stereotype.Controller;
|
||||
import org.springframework.web.bind.annotation.GetMapping;
|
||||
import org.springframework.web.bind.annotation.RequestMapping;
|
||||
|
||||
/**
|
||||
* 图标相关
|
||||
*
|
||||
* @author ruoyi
|
||||
*/
|
||||
@Controller
|
||||
@RequestMapping("/demo/icon")
|
||||
public class DemoIconController
|
||||
{
|
||||
private String prefix = "demo/icon";
|
||||
|
||||
/**
|
||||
* FontAwesome图标
|
||||
*/
|
||||
@GetMapping("/fontawesome")
|
||||
public String fontAwesome()
|
||||
{
|
||||
return prefix + "/fontawesome";
|
||||
}
|
||||
|
||||
/**
|
||||
* Glyphicons图标
|
||||
*/
|
||||
@GetMapping("/glyphicons")
|
||||
public String glyphicons()
|
||||
{
|
||||
return prefix + "/glyphicons";
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,303 @@
|
|||
package com.ruoyi.web.controller.demo.controller;
|
||||
|
||||
import java.util.ArrayList;
|
||||
import java.util.LinkedHashMap;
|
||||
import java.util.List;
|
||||
import java.util.Map;
|
||||
import org.springframework.stereotype.Controller;
|
||||
import org.springframework.ui.ModelMap;
|
||||
import org.springframework.web.bind.annotation.GetMapping;
|
||||
import org.springframework.web.bind.annotation.PathVariable;
|
||||
import org.springframework.web.bind.annotation.PostMapping;
|
||||
import org.springframework.web.bind.annotation.RequestMapping;
|
||||
import org.springframework.web.bind.annotation.ResponseBody;
|
||||
import org.springframework.web.multipart.MultipartFile;
|
||||
import com.ruoyi.common.core.controller.BaseController;
|
||||
import com.ruoyi.common.core.domain.AjaxResult;
|
||||
import com.ruoyi.common.core.page.PageDomain;
|
||||
import com.ruoyi.common.core.page.TableDataInfo;
|
||||
import com.ruoyi.common.core.page.TableSupport;
|
||||
import com.ruoyi.common.core.text.Convert;
|
||||
import com.ruoyi.common.exception.BusinessException;
|
||||
import com.ruoyi.common.utils.StringUtils;
|
||||
import com.ruoyi.common.utils.poi.ExcelUtil;
|
||||
import com.ruoyi.web.controller.demo.domain.UserOperateModel;
|
||||
|
||||
/**
|
||||
* 操作控制
|
||||
*
|
||||
* @author ruoyi
|
||||
*/
|
||||
@Controller
|
||||
@RequestMapping("/demo/operate")
|
||||
public class DemoOperateController extends BaseController
|
||||
{
|
||||
private String prefix = "demo/operate";
|
||||
|
||||
private final static Map<Integer, UserOperateModel> users = new LinkedHashMap<Integer, UserOperateModel>();
|
||||
{
|
||||
users.put(1, new UserOperateModel(1, "1000001", "测试1", "0", "15888888888", "ry@qq.com", 150.0, "0"));
|
||||
users.put(2, new UserOperateModel(2, "1000002", "测试2", "1", "15666666666", "ry@qq.com", 180.0, "1"));
|
||||
users.put(3, new UserOperateModel(3, "1000003", "测试3", "0", "15666666666", "ry@qq.com", 110.0, "1"));
|
||||
users.put(4, new UserOperateModel(4, "1000004", "测试4", "1", "15666666666", "ry@qq.com", 220.0, "1"));
|
||||
users.put(5, new UserOperateModel(5, "1000005", "测试5", "0", "15666666666", "ry@qq.com", 140.0, "1"));
|
||||
users.put(6, new UserOperateModel(6, "1000006", "测试6", "1", "15666666666", "ry@qq.com", 330.0, "1"));
|
||||
users.put(7, new UserOperateModel(7, "1000007", "测试7", "0", "15666666666", "ry@qq.com", 160.0, "1"));
|
||||
users.put(8, new UserOperateModel(8, "1000008", "测试8", "1", "15666666666", "ry@qq.com", 170.0, "1"));
|
||||
users.put(9, new UserOperateModel(9, "1000009", "测试9", "0", "15666666666", "ry@qq.com", 180.0, "1"));
|
||||
users.put(10, new UserOperateModel(10, "1000010", "测试10", "0", "15666666666", "ry@qq.com", 210.0, "1"));
|
||||
users.put(11, new UserOperateModel(11, "1000011", "测试11", "1", "15666666666", "ry@qq.com", 110.0, "1"));
|
||||
users.put(12, new UserOperateModel(12, "1000012", "测试12", "0", "15666666666", "ry@qq.com", 120.0, "1"));
|
||||
users.put(13, new UserOperateModel(13, "1000013", "测试13", "1", "15666666666", "ry@qq.com", 380.0, "1"));
|
||||
users.put(14, new UserOperateModel(14, "1000014", "测试14", "0", "15666666666", "ry@qq.com", 280.0, "1"));
|
||||
users.put(15, new UserOperateModel(15, "1000015", "测试15", "0", "15666666666", "ry@qq.com", 570.0, "1"));
|
||||
users.put(16, new UserOperateModel(16, "1000016", "测试16", "1", "15666666666", "ry@qq.com", 260.0, "1"));
|
||||
users.put(17, new UserOperateModel(17, "1000017", "测试17", "1", "15666666666", "ry@qq.com", 210.0, "1"));
|
||||
users.put(18, new UserOperateModel(18, "1000018", "测试18", "1", "15666666666", "ry@qq.com", 340.0, "1"));
|
||||
users.put(19, new UserOperateModel(19, "1000019", "测试19", "1", "15666666666", "ry@qq.com", 160.0, "1"));
|
||||
users.put(20, new UserOperateModel(20, "1000020", "测试20", "1", "15666666666", "ry@qq.com", 220.0, "1"));
|
||||
users.put(21, new UserOperateModel(21, "1000021", "测试21", "1", "15666666666", "ry@qq.com", 120.0, "1"));
|
||||
users.put(22, new UserOperateModel(22, "1000022", "测试22", "1", "15666666666", "ry@qq.com", 130.0, "1"));
|
||||
users.put(23, new UserOperateModel(23, "1000023", "测试23", "1", "15666666666", "ry@qq.com", 490.0, "1"));
|
||||
users.put(24, new UserOperateModel(24, "1000024", "测试24", "1", "15666666666", "ry@qq.com", 570.0, "1"));
|
||||
users.put(25, new UserOperateModel(25, "1000025", "测试25", "1", "15666666666", "ry@qq.com", 250.0, "1"));
|
||||
users.put(26, new UserOperateModel(26, "1000026", "测试26", "1", "15666666666", "ry@qq.com", 250.0, "1"));
|
||||
}
|
||||
|
||||
/**
|
||||
* 表格
|
||||
*/
|
||||
@GetMapping("/table")
|
||||
public String table()
|
||||
{
|
||||
return prefix + "/table";
|
||||
}
|
||||
|
||||
/**
|
||||
* 其他
|
||||
*/
|
||||
@GetMapping("/other")
|
||||
public String other()
|
||||
{
|
||||
return prefix + "/other";
|
||||
}
|
||||
|
||||
/**
|
||||
* 查询数据
|
||||
*/
|
||||
@PostMapping("/list")
|
||||
@ResponseBody
|
||||
public TableDataInfo list(UserOperateModel userModel)
|
||||
{
|
||||
TableDataInfo rspData = new TableDataInfo();
|
||||
List<UserOperateModel> userList = new ArrayList<UserOperateModel>(users.values());
|
||||
// 查询条件过滤
|
||||
if (StringUtils.isNotEmpty(userModel.getSearchValue()))
|
||||
{
|
||||
userList.clear();
|
||||
for (Map.Entry<Integer, UserOperateModel> entry : users.entrySet())
|
||||
{
|
||||
if (entry.getValue().getUserName().equals(userModel.getSearchValue()))
|
||||
{
|
||||
userList.add(entry.getValue());
|
||||
}
|
||||
}
|
||||
}
|
||||
PageDomain pageDomain = TableSupport.buildPageRequest();
|
||||
if (null == pageDomain.getPageNum() || null == pageDomain.getPageSize())
|
||||
{
|
||||
rspData.setRows(userList);
|
||||
rspData.setTotal(userList.size());
|
||||
return rspData;
|
||||
}
|
||||
Integer pageNum = (pageDomain.getPageNum() - 1) * 10;
|
||||
Integer pageSize = pageDomain.getPageNum() * 10;
|
||||
if (pageSize > userList.size())
|
||||
{
|
||||
pageSize = userList.size();
|
||||
}
|
||||
rspData.setRows(userList.subList(pageNum, pageSize));
|
||||
rspData.setTotal(userList.size());
|
||||
return rspData;
|
||||
}
|
||||
|
||||
/**
|
||||
* 新增用户
|
||||
*/
|
||||
@GetMapping("/add")
|
||||
public String add(ModelMap mmap)
|
||||
{
|
||||
return prefix + "/add";
|
||||
}
|
||||
|
||||
/**
|
||||
* 新增保存用户
|
||||
*/
|
||||
@PostMapping("/add")
|
||||
@ResponseBody
|
||||
public AjaxResult addSave(UserOperateModel user)
|
||||
{
|
||||
Integer userId = users.size() + 1;
|
||||
user.setUserId(userId);
|
||||
return AjaxResult.success(users.put(userId, user));
|
||||
}
|
||||
|
||||
/**
|
||||
* 修改用户
|
||||
*/
|
||||
@GetMapping("/edit/{userId}")
|
||||
public String edit(@PathVariable("userId") Integer userId, ModelMap mmap)
|
||||
{
|
||||
mmap.put("user", users.get(userId));
|
||||
return prefix + "/edit";
|
||||
}
|
||||
|
||||
/**
|
||||
* 修改保存用户
|
||||
*/
|
||||
@PostMapping("/edit")
|
||||
@ResponseBody
|
||||
public AjaxResult editSave(UserOperateModel user)
|
||||
{
|
||||
return AjaxResult.success(users.put(user.getUserId(), user));
|
||||
}
|
||||
|
||||
/**
|
||||
* 导出
|
||||
*/
|
||||
@PostMapping("/export")
|
||||
@ResponseBody
|
||||
public AjaxResult export(UserOperateModel user)
|
||||
{
|
||||
List<UserOperateModel> list = new ArrayList<UserOperateModel>(users.values());
|
||||
ExcelUtil<UserOperateModel> util = new ExcelUtil<UserOperateModel>(UserOperateModel.class);
|
||||
return util.exportExcel(list, "用户数据");
|
||||
}
|
||||
|
||||
/**
|
||||
* 下载模板
|
||||
*/
|
||||
@GetMapping("/importTemplate")
|
||||
@ResponseBody
|
||||
public AjaxResult importTemplate()
|
||||
{
|
||||
ExcelUtil<UserOperateModel> util = new ExcelUtil<UserOperateModel>(UserOperateModel.class);
|
||||
return util.importTemplateExcel("用户数据");
|
||||
}
|
||||
|
||||
/**
|
||||
* 导入数据
|
||||
*/
|
||||
@PostMapping("/importData")
|
||||
@ResponseBody
|
||||
public AjaxResult importData(MultipartFile file, boolean updateSupport) throws Exception
|
||||
{
|
||||
ExcelUtil<UserOperateModel> util = new ExcelUtil<UserOperateModel>(UserOperateModel.class);
|
||||
List<UserOperateModel> userList = util.importExcel(file.getInputStream());
|
||||
String message = importUser(userList, updateSupport);
|
||||
return AjaxResult.success(message);
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除用户
|
||||
*/
|
||||
@PostMapping("/remove")
|
||||
@ResponseBody
|
||||
public AjaxResult remove(String ids)
|
||||
{
|
||||
Integer[] userIds = Convert.toIntArray(ids);
|
||||
for (Integer userId : userIds)
|
||||
{
|
||||
users.remove(userId);
|
||||
}
|
||||
return AjaxResult.success();
|
||||
}
|
||||
|
||||
/**
|
||||
* 查看详细
|
||||
*/
|
||||
@GetMapping("/detail/{userId}")
|
||||
public String detail(@PathVariable("userId") Integer userId, ModelMap mmap)
|
||||
{
|
||||
mmap.put("user", users.get(userId));
|
||||
return prefix + "/detail";
|
||||
}
|
||||
|
||||
@PostMapping("/clean")
|
||||
@ResponseBody
|
||||
public AjaxResult clean()
|
||||
{
|
||||
users.clear();
|
||||
return success();
|
||||
}
|
||||
|
||||
/**
|
||||
* 导入用户数据
|
||||
*
|
||||
* @param userList 用户数据列表
|
||||
* @param isUpdateSupport 是否更新支持，如果已存在，则进行更新数据
|
||||
* @return 结果
|
||||
*/
|
||||
public String importUser(List<UserOperateModel> userList, Boolean isUpdateSupport)
|
||||
{
|
||||
if (StringUtils.isNull(userList) || userList.size() == 0)
|
||||
{
|
||||
throw new BusinessException("导入用户数据不能为空！");
|
||||
}
|
||||
int successNum = 0;
|
||||
int failureNum = 0;
|
||||
StringBuilder successMsg = new StringBuilder();
|
||||
StringBuilder failureMsg = new StringBuilder();
|
||||
for (UserOperateModel user : userList)
|
||||
{
|
||||
try
|
||||
{
|
||||
// 验证是否存在这个用户
|
||||
boolean userFlag = false;
|
||||
for (Map.Entry<Integer, UserOperateModel> entry : users.entrySet())
|
||||
{
|
||||
if (entry.getValue().getUserName().equals(user.getUserName()))
|
||||
{
|
||||
userFlag = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (!userFlag)
|
||||
{
|
||||
Integer userId = users.size() + 1;
|
||||
user.setUserId(userId);
|
||||
users.put(userId, user);
|
||||
successNum++;
|
||||
successMsg.append("<br/>" + successNum + "、用户 " + user.getUserName() + " 导入成功");
|
||||
}
|
||||
else if (isUpdateSupport)
|
||||
{
|
||||
users.put(user.getUserId(), user);
|
||||
successNum++;
|
||||
successMsg.append("<br/>" + successNum + "、用户 " + user.getUserName() + " 更新成功");
|
||||
}
|
||||
else
|
||||
{
|
||||
failureNum++;
|
||||
failureMsg.append("<br/>" + failureNum + "、用户 " + user.getUserName() + " 已存在");
|
||||
}
|
||||
}
|
||||
catch (Exception e)
|
||||
{
|
||||
failureNum++;
|
||||
String msg = "<br/>" + failureNum + "、账号 " + user.getUserName() + " 导入失败：";
|
||||
failureMsg.append(msg + e.getMessage());
|
||||
}
|
||||
}
|
||||
if (failureNum > 0)
|
||||
{
|
||||
failureMsg.insert(0, "很抱歉，导入失败！共 " + failureNum + " 条数据格式不正确，错误如下：");
|
||||
throw new BusinessException(failureMsg.toString());
|
||||
}
|
||||
else
|
||||
{
|
||||
successMsg.insert(0, "恭喜您，数据已全部导入成功！共 " + successNum + " 条，数据如下：");
|
||||
}
|
||||
return successMsg.toString();
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,367 @@
|
|||
package com.ruoyi.web.controller.demo.controller;
|
||||
|
||||
import java.util.ArrayList;
|
||||
import java.util.Arrays;
|
||||
import java.util.Collections;
|
||||
import java.util.Date;
|
||||
import java.util.List;
|
||||
import org.springframework.stereotype.Controller;
|
||||
import org.springframework.web.bind.annotation.GetMapping;
|
||||
import org.springframework.web.bind.annotation.PostMapping;
|
||||
import org.springframework.web.bind.annotation.RequestMapping;
|
||||
import org.springframework.web.bind.annotation.ResponseBody;
|
||||
import com.fasterxml.jackson.annotation.JsonFormat;
|
||||
import com.ruoyi.common.core.controller.BaseController;
|
||||
import com.ruoyi.common.core.page.PageDomain;
|
||||
import com.ruoyi.common.core.page.TableDataInfo;
|
||||
import com.ruoyi.common.core.page.TableSupport;
|
||||
import com.ruoyi.common.utils.DateUtils;
|
||||
import com.ruoyi.common.utils.StringUtils;
|
||||
|
||||
/**
|
||||
* 表格相关
|
||||
*
|
||||
* @author ruoyi
|
||||
*/
|
||||
@Controller
|
||||
@RequestMapping("/demo/table")
|
||||
public class DemoTableController extends BaseController
|
||||
{
|
||||
private String prefix = "demo/table";
|
||||
|
||||
private final static List<UserTableModel> users = new ArrayList<UserTableModel>();
|
||||
{
|
||||
users.add(new UserTableModel(1, "1000001", "测试1", "0", "15888888888", "ry@qq.com", 150.0, "0"));
|
||||
users.add(new UserTableModel(2, "1000002", "测试2", "1", "15666666666", "ry@qq.com", 180.0, "1"));
|
||||
users.add(new UserTableModel(3, "1000003", "测试3", "0", "15666666666", "ry@qq.com", 110.0, "1"));
|
||||
users.add(new UserTableModel(4, "1000004", "测试4", "1", "15666666666", "ry@qq.com", 220.0, "1"));
|
||||
users.add(new UserTableModel(5, "1000005", "测试5", "0", "15666666666", "ry@qq.com", 140.0, "1"));
|
||||
users.add(new UserTableModel(6, "1000006", "测试6", "1", "15666666666", "ry@qq.com", 330.0, "1"));
|
||||
users.add(new UserTableModel(7, "1000007", "测试7", "0", "15666666666", "ry@qq.com", 160.0, "1"));
|
||||
users.add(new UserTableModel(8, "1000008", "测试8", "1", "15666666666", "ry@qq.com", 170.0, "1"));
|
||||
users.add(new UserTableModel(9, "1000009", "测试9", "0", "15666666666", "ry@qq.com", 180.0, "1"));
|
||||
users.add(new UserTableModel(10, "1000010", "测试10", "0", "15666666666", "ry@qq.com", 210.0, "1"));
|
||||
users.add(new UserTableModel(11, "1000011", "测试11", "1", "15666666666", "ry@qq.com", 110.0, "1"));
|
||||
users.add(new UserTableModel(12, "1000012", "测试12", "0", "15666666666", "ry@qq.com", 120.0, "1"));
|
||||
users.add(new UserTableModel(13, "1000013", "测试13", "1", "15666666666", "ry@qq.com", 380.0, "1"));
|
||||
users.add(new UserTableModel(14, "1000014", "测试14", "0", "15666666666", "ry@qq.com", 280.0, "1"));
|
||||
users.add(new UserTableModel(15, "1000015", "测试15", "0", "15666666666", "ry@qq.com", 570.0, "1"));
|
||||
users.add(new UserTableModel(16, "1000016", "测试16", "1", "15666666666", "ry@qq.com", 260.0, "1"));
|
||||
users.add(new UserTableModel(17, "1000017", "测试17", "1", "15666666666", "ry@qq.com", 210.0, "1"));
|
||||
users.add(new UserTableModel(18, "1000018", "测试18", "1", "15666666666", "ry@qq.com", 340.0, "1"));
|
||||
users.add(new UserTableModel(19, "1000019", "测试19", "1", "15666666666", "ry@qq.com", 160.0, "1"));
|
||||
users.add(new UserTableModel(20, "1000020", "测试20", "1", "15666666666", "ry@qq.com", 220.0, "1"));
|
||||
users.add(new UserTableModel(21, "1000021", "测试21", "1", "15666666666", "ry@qq.com", 120.0, "1"));
|
||||
users.add(new UserTableModel(22, "1000022", "测试22", "1", "15666666666", "ry@qq.com", 130.0, "1"));
|
||||
users.add(new UserTableModel(23, "1000023", "测试23", "1", "15666666666", "ry@qq.com", 490.0, "1"));
|
||||
users.add(new UserTableModel(24, "1000024", "测试24", "1", "15666666666", "ry@qq.com", 570.0, "1"));
|
||||
users.add(new UserTableModel(25, "1000025", "测试25", "1", "15666666666", "ry@qq.com", 250.0, "1"));
|
||||
users.add(new UserTableModel(26, "1000026", "测试26", "1", "15666666666", "ry@qq.com", 250.0, "1"));
|
||||
}
|
||||
|
||||
/**
|
||||
* 搜索相关
|
||||
*/
|
||||
@GetMapping("/search")
|
||||
public String search()
|
||||
{
|
||||
return prefix + "/search";
|
||||
}
|
||||
|
||||
/**
|
||||
* 数据汇总
|
||||
*/
|
||||
@GetMapping("/footer")
|
||||
public String footer()
|
||||
{
|
||||
return prefix + "/footer";
|
||||
}
|
||||
|
||||
/**
|
||||
* 组合表头
|
||||
*/
|
||||
@GetMapping("/groupHeader")
|
||||
public String groupHeader()
|
||||
{
|
||||
return prefix + "/groupHeader";
|
||||
}
|
||||
|
||||
/**
|
||||
* 表格导出
|
||||
*/
|
||||
@GetMapping("/export")
|
||||
public String export()
|
||||
{
|
||||
return prefix + "/export";
|
||||
}
|
||||
|
||||
/**
|
||||
* 翻页记住选择
|
||||
*/
|
||||
@GetMapping("/remember")
|
||||
public String remember()
|
||||
{
|
||||
return prefix + "/remember";
|
||||
}
|
||||
|
||||
/**
|
||||
* 跳转至指定页
|
||||
*/
|
||||
@GetMapping("/pageGo")
|
||||
public String pageGo()
|
||||
{
|
||||
return prefix + "/pageGo";
|
||||
}
|
||||
|
||||
/**
|
||||
* 自定义查询参数
|
||||
*/
|
||||
@GetMapping("/params")
|
||||
public String params()
|
||||
{
|
||||
return prefix + "/params";
|
||||
}
|
||||
|
||||
/**
|
||||
* 多表格
|
||||
*/
|
||||
@GetMapping("/multi")
|
||||
public String multi()
|
||||
{
|
||||
return prefix + "/multi";
|
||||
}
|
||||
|
||||
/**
|
||||
* 点击按钮加载表格
|
||||
*/
|
||||
@GetMapping("/button")
|
||||
public String button()
|
||||
{
|
||||
return prefix + "/button";
|
||||
}
|
||||
|
||||
/**
|
||||
* 表格冻结列
|
||||
*/
|
||||
@GetMapping("/fixedColumns")
|
||||
public String fixedColumns()
|
||||
{
|
||||
return prefix + "/fixedColumns";
|
||||
}
|
||||
|
||||
/**
|
||||
* 自定义触发事件
|
||||
*/
|
||||
@GetMapping("/event")
|
||||
public String event()
|
||||
{
|
||||
return prefix + "/event";
|
||||
}
|
||||
|
||||
/**
|
||||
* 表格细节视图
|
||||
*/
|
||||
@GetMapping("/detail")
|
||||
public String detail()
|
||||
{
|
||||
return prefix + "/detail";
|
||||
}
|
||||
|
||||
/**
|
||||
* 表格图片预览
|
||||
*/
|
||||
@GetMapping("/image")
|
||||
public String image()
|
||||
{
|
||||
return prefix + "/image";
|
||||
}
|
||||
|
||||
/**
|
||||
* 表格其他操作
|
||||
*/
|
||||
@GetMapping("/other")
|
||||
public String other()
|
||||
{
|
||||
return prefix + "/other";
|
||||
}
|
||||
|
||||
/**
|
||||
* 查询数据
|
||||
*/
|
||||
@PostMapping("/list")
|
||||
@ResponseBody
|
||||
public TableDataInfo list(UserTableModel userModel)
|
||||
{
|
||||
TableDataInfo rspData = new TableDataInfo();
|
||||
List<UserTableModel> userList = new ArrayList<UserTableModel>(Arrays.asList(new UserTableModel[users.size()]));
|
||||
Collections.copy(userList, users);
|
||||
// 查询条件过滤
|
||||
if (StringUtils.isNotEmpty(userModel.getUserName()))
|
||||
{
|
||||
userList.clear();
|
||||
for (UserTableModel user : users)
|
||||
{
|
||||
if (user.getUserName().equals(userModel.getUserName()))
|
||||
{
|
||||
userList.add(user);
|
||||
}
|
||||
}
|
||||
}
|
||||
PageDomain pageDomain = TableSupport.buildPageRequest();
|
||||
if (null == pageDomain.getPageNum() || null == pageDomain.getPageSize())
|
||||
{
|
||||
rspData.setRows(userList);
|
||||
rspData.setTotal(userList.size());
|
||||
return rspData;
|
||||
}
|
||||
Integer pageNum = (pageDomain.getPageNum() - 1) * 10;
|
||||
Integer pageSize = pageDomain.getPageNum() * 10;
|
||||
if (pageSize > userList.size())
|
||||
{
|
||||
pageSize = userList.size();
|
||||
}
|
||||
rspData.setRows(userList.subList(pageNum, pageSize));
|
||||
rspData.setTotal(userList.size());
|
||||
return rspData;
|
||||
}
|
||||
}
|
||||
|
||||
class UserTableModel
|
||||
{
|
||||
/** 用户ID */
|
||||
private int userId;
|
||||
|
||||
/** 用户编号 */
|
||||
private String userCode;
|
||||
|
||||
/** 用户姓名 */
|
||||
private String userName;
|
||||
|
||||
/** 用户性别 */
|
||||
private String userSex;
|
||||
|
||||
/** 用户手机 */
|
||||
private String userPhone;
|
||||
|
||||
/** 用户邮箱 */
|
||||
private String userEmail;
|
||||
|
||||
/** 用户余额 */
|
||||
private double userBalance;
|
||||
|
||||
/** 用户状态（0正常 1停用） */
|
||||
private String status;
|
||||
|
||||
/** 创建时间 */
|
||||
@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
|
||||
private Date createTime;
|
||||
|
||||
public UserTableModel()
|
||||
{
|
||||
|
||||
}
|
||||
|
||||
public UserTableModel(int userId, String userCode, String userName, String userSex, String userPhone,
|
||||
String userEmail, double userBalance, String status)
|
||||
{
|
||||
this.userId = userId;
|
||||
this.userCode = userCode;
|
||||
this.userName = userName;
|
||||
this.userSex = userSex;
|
||||
this.userPhone = userPhone;
|
||||
this.userEmail = userEmail;
|
||||
this.userBalance = userBalance;
|
||||
this.status = status;
|
||||
this.createTime = DateUtils.getNowDate();
|
||||
}
|
||||
|
||||
public int getUserId()
|
||||
{
|
||||
return userId;
|
||||
}
|
||||
|
||||
public void setUserId(int userId)
|
||||
{
|
||||
this.userId = userId;
|
||||
}
|
||||
|
||||
public String getUserCode()
|
||||
{
|
||||
return userCode;
|
||||
}
|
||||
|
||||
public void setUserCode(String userCode)
|
||||
{
|
||||
this.userCode = userCode;
|
||||
}
|
||||
|
||||
public String getUserName()
|
||||
{
|
||||
return userName;
|
||||
}
|
||||
|
||||
public void setUserName(String userName)
|
||||
{
|
||||
this.userName = userName;
|
||||
}
|
||||
|
||||
public String getUserSex()
|
||||
{
|
||||
return userSex;
|
||||
}
|
||||
|
||||
public void setUserSex(String userSex)
|
||||
{
|
||||
this.userSex = userSex;
|
||||
}
|
||||
|
||||
public String getUserPhone()
|
||||
{
|
||||
return userPhone;
|
||||
}
|
||||
|
||||
public void setUserPhone(String userPhone)
|
||||
{
|
||||
this.userPhone = userPhone;
|
||||
}
|
||||
|
||||
public String getUserEmail()
|
||||
{
|
||||
return userEmail;
|
||||
}
|
||||
|
||||
public void setUserEmail(String userEmail)
|
||||
{
|
||||
this.userEmail = userEmail;
|
||||
}
|
||||
|
||||
public double getUserBalance()
|
||||
{
|
||||
return userBalance;
|
||||
}
|
||||
|
||||
public void setUserBalance(double userBalance)
|
||||
{
|
||||
this.userBalance = userBalance;
|
||||
}
|
||||
|
||||
public String getStatus()
|
||||
{
|
||||
return status;
|
||||
}
|
||||
|
||||
public void setStatus(String status)
|
||||
{
|
||||
this.status = status;
|
||||
}
|
||||
|
||||
public Date getCreateTime()
|
||||
{
|
||||
return createTime;
|
||||
}
|
||||
|
||||
public void setCreateTime(Date createTime)
|
||||
{
|
||||
this.createTime = createTime;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,147 @@
|
|||
package com.ruoyi.web.controller.demo.domain;
|
||||
|
||||
import java.util.Date;
|
||||
import com.ruoyi.common.annotation.Excel;
|
||||
import com.ruoyi.common.annotation.Excel.Type;
|
||||
import com.ruoyi.common.core.domain.BaseEntity;
|
||||
import com.ruoyi.common.utils.DateUtils;
|
||||
|
||||
public class UserOperateModel extends BaseEntity
|
||||
{
|
||||
private static final long serialVersionUID = 1L;
|
||||
|
||||
private int userId;
|
||||
|
||||
@Excel(name = "用户编号")
|
||||
private String userCode;
|
||||
|
||||
@Excel(name = "用户姓名")
|
||||
private String userName;
|
||||
|
||||
@Excel(name = "用户性别", readConverterExp = "0=男,1=女,2=未知")
|
||||
private String userSex;
|
||||
|
||||
@Excel(name = "用户手机")
|
||||
private String userPhone;
|
||||
|
||||
@Excel(name = "用户邮箱")
|
||||
private String userEmail;
|
||||
|
||||
@Excel(name = "用户余额")
|
||||
private double userBalance;
|
||||
|
||||
@Excel(name = "用户状态", readConverterExp = "0=正常,1=停用")
|
||||
private String status;
|
||||
|
||||
@Excel(name = "创建时间", width = 30, dateFormat = "yyyy-MM-dd HH:mm:ss", type = Type.EXPORT)
|
||||
private Date createTime;
|
||||
|
||||
public UserOperateModel()
|
||||
{
|
||||
|
||||
}
|
||||
|
||||
public UserOperateModel(int userId, String userCode, String userName, String userSex, String userPhone,
|
||||
String userEmail, double userBalance, String status)
|
||||
{
|
||||
this.userId = userId;
|
||||
this.userCode = userCode;
|
||||
this.userName = userName;
|
||||
this.userSex = userSex;
|
||||
this.userPhone = userPhone;
|
||||
this.userEmail = userEmail;
|
||||
this.userBalance = userBalance;
|
||||
this.status = status;
|
||||
this.createTime = DateUtils.getNowDate();
|
||||
}
|
||||
|
||||
public int getUserId()
|
||||
{
|
||||
return userId;
|
||||
}
|
||||
|
||||
public void setUserId(int userId)
|
||||
{
|
||||
this.userId = userId;
|
||||
}
|
||||
|
||||
public String getUserCode()
|
||||
{
|
||||
return userCode;
|
||||
}
|
||||
|
||||
public void setUserCode(String userCode)
|
||||
{
|
||||
this.userCode = userCode;
|
||||
}
|
||||
|
||||
public String getUserName()
|
||||
{
|
||||
return userName;
|
||||
}
|
||||
|
||||
public void setUserName(String userName)
|
||||
{
|
||||
this.userName = userName;
|
||||
}
|
||||
|
||||
public String getUserSex()
|
||||
{
|
||||
return userSex;
|
||||
}
|
||||
|
||||
public void setUserSex(String userSex)
|
||||
{
|
||||
this.userSex = userSex;
|
||||
}
|
||||
|
||||
public String getUserPhone()
|
||||
{
|
||||
return userPhone;
|
||||
}
|
||||
|
||||
public void setUserPhone(String userPhone)
|
||||
{
|
||||
this.userPhone = userPhone;
|
||||
}
|
||||
|
||||
public String getUserEmail()
|
||||
{
|
||||
return userEmail;
|
||||
}
|
||||
|
||||
public void setUserEmail(String userEmail)
|
||||
{
|
||||
this.userEmail = userEmail;
|
||||
}
|
||||
|
||||
public double getUserBalance()
|
||||
{
|
||||
return userBalance;
|
||||
}
|
||||
|
||||
public void setUserBalance(double userBalance)
|
||||
{
|
||||
this.userBalance = userBalance;
|
||||
}
|
||||
|
||||
public String getStatus()
|
||||
{
|
||||
return status;
|
||||
}
|
||||
|
||||
public void setStatus(String status)
|
||||
{
|
||||
this.status = status;
|
||||
}
|
||||
|
||||
public Date getCreateTime()
|
||||
{
|
||||
return createTime;
|
||||
}
|
||||
|
||||
public void setCreateTime(Date createTime)
|
||||
{
|
||||
this.createTime = createTime;
|
||||
}
|
||||
}
|
||||
|
|
@ -34,6 +34,7 @@ public class SysIndexController extends BaseController
|
|||
mmap.put("menus", menus);
|
||||
mmap.put("user", user);
|
||||
mmap.put("copyrightYear", Global.getCopyrightYear());
|
||||
mmap.put("demoEnabled", Global.isDemoEnabled());
|
||||
return "index";
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,9 +3,11 @@ ruoyi:
|
|||
# 名称
|
||||
name: RuoYi
|
||||
# 版本
|
||||
version: 3.3.0
|
||||
version: 3.4.0
|
||||
# 版权年份
|
||||
copyrightYear: 2019
|
||||
# 实例演示开关
|
||||
demoEnabled: true
|
||||
# 文件路径
|
||||
profile: D:/profile/
|
||||
# 获取ip地址开关
|
||||
|
|
|
|||
|
|
@ -0,0 +1,550 @@
|
|||
/*!
|
||||
* bootstrap-fileinput v5.0.4
|
||||
* http://plugins.krajee.com/file-input
|
||||
*
|
||||
* Krajee default styling for bootstrap-fileinput.
|
||||
*
|
||||
* Author: Kartik Visweswaran
|
||||
* Copyright: 2014 - 2019, Kartik Visweswaran, Krajee.com
|
||||
*
|
||||
* Licensed under the BSD-3-Clause
|
||||
* https://github.com/kartik-v/bootstrap-fileinput/blob/master/LICENSE.md
|
||||
*/
|
||||
.file-loading input[type=file], input[type=file].file-loading {
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.file-no-browse {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 20%;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
font-size: 0;
|
||||
opacity: 0;
|
||||
border: none;
|
||||
background: none;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.kv-hidden, .file-caption-icon, .file-zoom-dialog .modal-header:before, .file-zoom-dialog .modal-header:after, .file-input-new .file-preview, .file-input-new .close, .file-input-new .glyphicon-file, .file-input-new .fileinput-remove-button, .file-input-new .fileinput-upload-button, .file-input-new .no-browse .input-group-btn, .file-input-ajax-new .fileinput-remove-button, .file-input-ajax-new .fileinput-upload-button, .file-input-ajax-new .no-browse .input-group-btn, .hide-content .kv-file-content, .is-locked .fileinput-upload-button, .is-locked .fileinput-remove-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.btn-file input[type=file], .file-caption-icon, .file-preview .fileinput-remove, .krajee-default .file-thumb-progress, .file-zoom-dialog .btn-navigate, .file-zoom-dialog .floating-buttons {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.file-caption-icon .kv-caption-icon {
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
.file-input, .file-loading:before, .btn-file, .file-caption, .file-preview, .krajee-default.file-preview-frame, .krajee-default .file-thumbnail-footer, .file-zoom-dialog .modal-dialog {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.file-error-message pre, .file-error-message ul, .krajee-default .file-actions, .krajee-default .file-other-error {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.file-error-message pre, .file-error-message ul {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.krajee-default .file-drag-handle, .krajee-default .file-upload-indicator {
|
||||
float: left;
|
||||
margin-top: 10px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.krajee-default .file-thumb-progress .progress, .krajee-default .file-thumb-progress .progress-bar {
|
||||
height: 11px;
|
||||
font-family: Verdana, Helvetica, sans-serif;
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.krajee-default .file-thumb-progress .progress, .kv-upload-progress .progress {
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
.krajee-default .file-caption-info, .krajee-default .file-size-info {
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 160px;
|
||||
height: 15px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.file-zoom-content > .file-object.type-video, .file-zoom-content > .file-object.type-flash, .file-zoom-content > .file-object.type-image {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.file-zoom-content > .file-object.type-video, .file-zoom-content > .file-object.type-flash {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.file-zoom-content > .file-object.type-pdf, .file-zoom-content > .file-object.type-html, .file-zoom-content > .file-object.type-text, .file-zoom-content > .file-object.type-default {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.file-loading:before {
|
||||
content: " Loading...";
|
||||
display: inline-block;
|
||||
padding-left: 20px;
|
||||
line-height: 16px;
|
||||
font-size: 13px;
|
||||
font-variant: small-caps;
|
||||
color: #999;
|
||||
background: transparent url(../img/loading.gif) top left no-repeat;
|
||||
}
|
||||
|
||||
.file-object {
|
||||
margin: 0 0 -5px 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.btn-file {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.btn-file input[type=file] {
|
||||
top: 0;
|
||||
left: 0;
|
||||
min-width: 100%;
|
||||
min-height: 100%;
|
||||
text-align: right;
|
||||
opacity: 0;
|
||||
background: none repeat scroll 0 0 transparent;
|
||||
cursor: inherit;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.btn-file ::-ms-browse {
|
||||
font-size: 10000px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.file-caption .file-caption-name {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
background: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.file-caption.icon-visible .file-caption-icon {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.file-caption.icon-visible .file-caption-name {
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.file-caption-icon {
|
||||
left: 8px;
|
||||
}
|
||||
|
||||
.file-error-message {
|
||||
color: #a94442;
|
||||
background-color: #f2dede;
|
||||
margin: 5px;
|
||||
border: 1px solid #ebccd1;
|
||||
border-radius: 4px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.file-error-message pre {
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.file-caption-disabled {
|
||||
background-color: #eee;
|
||||
cursor: not-allowed;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.file-preview {
|
||||
border-radius: 5px;
|
||||
border: 1px solid #ddd;
|
||||
padding: 8px;
|
||||
width: 100%;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.file-preview .btn-xs {
|
||||
padding: 1px 5px;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.file-preview .fileinput-remove {
|
||||
top: 1px;
|
||||
right: 1px;
|
||||
line-height: 10px;
|
||||
}
|
||||
|
||||
.file-preview .clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.file-preview-image {
|
||||
font: 40px Impact, Charcoal, sans-serif;
|
||||
color: #008000;
|
||||
}
|
||||
|
||||
.krajee-default.file-preview-frame {
|
||||
margin: 8px;
|
||||
border: 1px solid rgba(0,0,0,0.2);
|
||||
box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
|
||||
padding: 6px;
|
||||
float: left;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.krajee-default.file-preview-frame .kv-file-content {
|
||||
width: 213px;
|
||||
height: 160px;
|
||||
}
|
||||
|
||||
.krajee-default .file-preview-other-frame {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.krajee-default.file-preview-frame .kv-file-content.kv-pdf-rendered {
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.krajee-default.file-preview-frame[data-template="audio"] .kv-file-content {
|
||||
width: 240px;
|
||||
height: 55px;
|
||||
}
|
||||
|
||||
.krajee-default.file-preview-frame .file-thumbnail-footer {
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
.krajee-default.file-preview-frame:not(.file-preview-error):hover {
|
||||
border: 1px solid rgba(0,0,0,0.3);
|
||||
box-shadow: 0 0 10px 0 rgba(0,0,0,0.4);
|
||||
}
|
||||
|
||||
.krajee-default .file-preview-text {
|
||||
display: block;
|
||||
color: #428bca;
|
||||
border: 1px solid #ddd;
|
||||
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
|
||||
outline: none;
|
||||
padding: 8px;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.krajee-default .file-preview-html {
|
||||
border: 1px solid #ddd;
|
||||
padding: 8px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.krajee-default .file-other-icon {
|
||||
font-size: 6em;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.krajee-default .file-footer-buttons {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.krajee-default .file-footer-caption {
|
||||
display: block;
|
||||
text-align: center;
|
||||
padding-top: 4px;
|
||||
font-size: 11px;
|
||||
color: #777;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.file-upload-stats {
|
||||
font-size: 10px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.kv-upload-progress .file-upload-stats {
|
||||
font-size: 12px;
|
||||
margin: -10px 0 5px;
|
||||
}
|
||||
|
||||
.krajee-default .file-preview-error {
|
||||
opacity: 0.65;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.krajee-default .file-thumb-progress {
|
||||
height: 11px;
|
||||
top: 37px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.krajee-default.kvsortable-ghost {
|
||||
background: #e1edf7;
|
||||
border: 2px solid #a1abff;
|
||||
}
|
||||
|
||||
.krajee-default .file-preview-other:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.krajee-default .file-preview-frame:not(.file-preview-error) .file-footer-caption:hover {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.kv-upload-progress .progress {
|
||||
height: 20px;
|
||||
margin: 10px 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.kv-upload-progress .progress-bar {
|
||||
height: 20px;
|
||||
font-family: Verdana, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
/*noinspection CssOverwrittenProperties*/
|
||||
.file-zoom-dialog .file-other-icon {
|
||||
font-size: 22em;
|
||||
font-size: 50vmin;
|
||||
}
|
||||
|
||||
.file-zoom-dialog .modal-dialog {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.file-zoom-dialog .modal-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.file-zoom-dialog .btn-navigate {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: transparent;
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
opacity: 0.7;
|
||||
top: 45%;
|
||||
font-size: 4em;
|
||||
color: #1c94c4;
|
||||
}
|
||||
|
||||
.file-zoom-dialog .btn-navigate:not([disabled]):hover {
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.file-zoom-dialog .floating-buttons {
|
||||
top: 5px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.file-zoom-dialog .btn-navigate[disabled] {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.file-zoom-dialog .btn-prev {
|
||||
left: 1px;
|
||||
}
|
||||
|
||||
.file-zoom-dialog .btn-next {
|
||||
right: 1px;
|
||||
}
|
||||
|
||||
.file-zoom-dialog .kv-zoom-title {
|
||||
font-weight: 300;
|
||||
color: #999;
|
||||
max-width: 50%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.file-input-new .no-browse .form-control {
|
||||
border-top-right-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
||||
.file-input-ajax-new .no-browse .form-control {
|
||||
border-top-right-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
||||
.file-caption-main {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.file-thumb-loading {
|
||||
background: transparent url(../img/loading.gif) no-repeat scroll center center content-box !important;
|
||||
}
|
||||
|
||||
.file-drop-zone {
|
||||
border: 1px dashed #aaa;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
margin: 12px 15px 12px 12px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.file-drop-zone.clickable:hover {
|
||||
border: 2px dashed #999;
|
||||
}
|
||||
|
||||
.file-drop-zone.clickable:focus {
|
||||
border: 2px solid #5acde2;
|
||||
}
|
||||
|
||||
.file-drop-zone .file-preview-thumbnails {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.file-drop-zone-title {
|
||||
color: #aaa;
|
||||
font-size: 1.6em;
|
||||
padding: 85px 10px;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.file-highlighted {
|
||||
border: 2px dashed #999 !important;
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.file-uploading {
|
||||
background: url(../img/loading-sm.gif) no-repeat center bottom 10px;
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
.file-zoom-fullscreen .modal-dialog {
|
||||
min-width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.file-zoom-fullscreen .modal-content {
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.file-zoom-fullscreen .modal-body {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.floating-buttons {
|
||||
z-index: 3000;
|
||||
}
|
||||
|
||||
.floating-buttons .btn-kv {
|
||||
margin-left: 3px;
|
||||
z-index: 3000;
|
||||
}
|
||||
|
||||
.kv-zoom-actions .btn-kv {
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
.file-zoom-content {
|
||||
height: 480px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.file-zoom-content .file-preview-image {
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.file-zoom-content .file-preview-video {
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.file-zoom-content > .file-object.type-image {
|
||||
height: auto;
|
||||
min-height: inherit;
|
||||
}
|
||||
|
||||
.file-zoom-content > .file-object.type-audio {
|
||||
width: auto;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.file-zoom-dialog .modal-dialog {
|
||||
max-width: 500px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.file-zoom-dialog .modal-lg {
|
||||
max-width: 800px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.file-preview-thumbnails {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.file-zoom-dialog .modal-header {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 350px) {
|
||||
.krajee-default.file-preview-frame:not([data-template="audio"]) .kv-file-content {
|
||||
width: 160px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 420px) {
|
||||
.krajee-default.file-preview-frame .kv-file-content.kv-pdf-rendered {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.file-loading[dir=rtl]:before {
|
||||
background: transparent url(../img/loading.gif) top right no-repeat;
|
||||
padding-left: 0;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.file-sortable .file-drag-handle {
|
||||
cursor: move;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.file-sortable .file-drag-handle:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.clickable .file-drop-zone-title {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.file-preview-initial.sortable-chosen {
|
||||
background-color: #d9edf7;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
12
ruoyi-admin/src/main/resources/static/ajax/libs/bootstrap-fileinput/fileinput.min.css
vendored
Normal file
12
ruoyi-admin/src/main/resources/static/ajax/libs/bootstrap-fileinput/fileinput.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
10
ruoyi-admin/src/main/resources/static/ajax/libs/bootstrap-fileinput/fileinput.min.js
vendored
Normal file
10
ruoyi-admin/src/main/resources/static/ajax/libs/bootstrap-fileinput/fileinput.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -1,7 +1,6 @@
|
|||
/**
|
||||
* bootstrapTreeTable
|
||||
*
|
||||
* @author swifly
|
||||
* 基于bootstrapTreeTable/bootstrap-table-treegrid修改
|
||||
* Copyright (c) 2019 ruoyi
|
||||
*/
|
||||
(function($) {
|
||||
"use strict";
|
||||
|
|
@ -240,9 +239,11 @@
|
|||
item.isShow = false;
|
||||
// 这里兼容几种常见Root节点写法
|
||||
// 默认的几种判断
|
||||
var firstCode = (0 == index ? item[options.parentCode] : '-');
|
||||
var _defaultRootFlag = item[options.parentCode] == '0' ||
|
||||
item[options.parentCode] == 0 ||
|
||||
item[options.parentCode] == null ||
|
||||
item[options.parentCode] == firstCode ||
|
||||
item[options.parentCode] == '';
|
||||
if (!item[options.parentCode] || (_root ? (item[options.parentCode] == options.rootIdValue) : _defaultRootFlag)) {
|
||||
if (!target.data_list["_root_"]) {
|
||||
|
|
|
|||
86
ruoyi-admin/src/main/resources/static/ajax/libs/duallistbox/bootstrap-duallistbox.css
vendored
Normal file
86
ruoyi-admin/src/main/resources/static/ajax/libs/duallistbox/bootstrap-duallistbox.css
vendored
Normal file
|
|
@ -0,0 +1,86 @@
|
|||
/*
|
||||
* Bootstrap Duallistbox - v3.0.7
|
||||
* A responsive dual listbox widget optimized for Twitter Bootstrap. It works on all modern browsers and on touch devices.
|
||||
* https://www.virtuosoft.eu/code/bootstrap-duallistbox/
|
||||
*
|
||||
* Made by István Ujj-Mészáros
|
||||
* Under Apache License v2.0 License
|
||||
*/
|
||||
.bootstrap-duallistbox-container .buttons {
|
||||
width: 100%;
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
|
||||
.bootstrap-duallistbox-container label {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.bootstrap-duallistbox-container .info {
|
||||
display: inline-block;
|
||||
margin-bottom: 5px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.bootstrap-duallistbox-container .clear1,
|
||||
.bootstrap-duallistbox-container .clear2 {
|
||||
display: none;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.bootstrap-duallistbox-container .box1.filtered .clear1,
|
||||
.bootstrap-duallistbox-container .box2.filtered .clear2 {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.bootstrap-duallistbox-container .move,
|
||||
.bootstrap-duallistbox-container .remove {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.bootstrap-duallistbox-container .btn-group .btn {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
.bootstrap-duallistbox-container select {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
.bootstrap-duallistbox-container .moveall,
|
||||
.bootstrap-duallistbox-container .removeall {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.bootstrap-duallistbox-container.bs2compatible .btn-group > .btn + .btn {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.bootstrap-duallistbox-container select {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.bootstrap-duallistbox-container .filter {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 31px;
|
||||
margin: 0 0 5px 0;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.bootstrap-duallistbox-container .filter.placeholder {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.bootstrap-duallistbox-container.moveonselect .move,
|
||||
.bootstrap-duallistbox-container.moveonselect .remove {
|
||||
display:none;
|
||||
}
|
||||
|
||||
.bootstrap-duallistbox-container.moveonselect .moveall,
|
||||
.bootstrap-duallistbox-container.moveonselect .removeall {
|
||||
width: 100%;
|
||||
}
|
||||
841
ruoyi-admin/src/main/resources/static/ajax/libs/duallistbox/bootstrap-duallistbox.js
vendored
Normal file
841
ruoyi-admin/src/main/resources/static/ajax/libs/duallistbox/bootstrap-duallistbox.js
vendored
Normal file
|
|
@ -0,0 +1,841 @@
|
|||
/*
|
||||
* Bootstrap Duallistbox - v3.0.7
|
||||
* A responsive dual listbox widget optimized for Twitter Bootstrap. It works on all modern browsers and on touch devices.
|
||||
* https://www.virtuosoft.eu/code/bootstrap-duallistbox/
|
||||
*
|
||||
* Made by István Ujj-Mészáros
|
||||
* Under Apache License v2.0 License
|
||||
*/
|
||||
;(function ($, window, document, undefined) {
|
||||
// Create the defaults once
|
||||
var pluginName = 'bootstrapDualListbox',
|
||||
defaults = {
|
||||
bootstrap2Compatible: false,
|
||||
filterTextClear: 'show all',
|
||||
filterPlaceHolder: 'Filter',
|
||||
moveSelectedLabel: 'Move selected',
|
||||
moveAllLabel: 'Move all',
|
||||
removeSelectedLabel: 'Remove selected',
|
||||
removeAllLabel: 'Remove all',
|
||||
moveOnSelect: true, // true/false (forced true on androids, see the comment later)
|
||||
moveOnDoubleClick: true, // true/false (forced false on androids, cause moveOnSelect is forced to true)
|
||||
preserveSelectionOnMove: false, // 'all' / 'moved' / false
|
||||
selectedListLabel: false, // 'string', false
|
||||
nonSelectedListLabel: false, // 'string', false
|
||||
helperSelectNamePostfix: '_helper', // 'string_of_postfix' / false
|
||||
selectorMinimalHeight: 100,
|
||||
showFilterInputs: true, // whether to show filter inputs
|
||||
nonSelectedFilter: '', // string, filter the non selected options
|
||||
selectedFilter: '', // string, filter the selected options
|
||||
infoText: 'Showing all {0}', // text when all options are visible / false for no info text
|
||||
infoTextFiltered: '<span class="label label-warning">Filtered</span> {0} from {1}', // when not all of the options are visible due to the filter
|
||||
infoTextEmpty: 'Empty list', // when there are no options present in the list
|
||||
filterOnValues: false, // filter by selector's values, boolean
|
||||
sortByInputOrder: false,
|
||||
eventMoveOverride: false, // boolean, allows user to unbind default event behaviour and run their own instead
|
||||
eventMoveAllOverride: false, // boolean, allows user to unbind default event behaviour and run their own instead
|
||||
eventRemoveOverride: false, // boolean, allows user to unbind default event behaviour and run their own instead
|
||||
eventRemoveAllOverride: false // boolean, allows user to unbind default event behaviour and run their own instead
|
||||
},
|
||||
// Selections are invisible on android if the containing select is styled with CSS
|
||||
// http://code.google.com/p/android/issues/detail?id=16922
|
||||
isBuggyAndroid = /android/i.test(navigator.userAgent.toLowerCase());
|
||||
|
||||
// The actual plugin constructor
|
||||
function BootstrapDualListbox(element, options) {
|
||||
this.element = $(element);
|
||||
// jQuery has an extend method which merges the contents of two or
|
||||
// more objects, storing the result in the first object. The first object
|
||||
// is generally empty as we don't want to alter the default options for
|
||||
// future instances of the plugin
|
||||
this.settings = $.extend({}, defaults, options);
|
||||
this._defaults = defaults;
|
||||
this._name = pluginName;
|
||||
this.init();
|
||||
}
|
||||
|
||||
function triggerChangeEvent(dualListbox) {
|
||||
dualListbox.element.trigger('change');
|
||||
}
|
||||
|
||||
function updateSelectionStates(dualListbox) {
|
||||
dualListbox.element.find('option').each(function(index, item) {
|
||||
var $item = $(item);
|
||||
if (typeof($item.data('original-index')) === 'undefined') {
|
||||
$item.data('original-index', dualListbox.elementCount++);
|
||||
}
|
||||
if (typeof($item.data('_selected')) === 'undefined') {
|
||||
$item.data('_selected', false);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function changeSelectionState(dualListbox, original_index, selected) {
|
||||
dualListbox.element.find('option').each(function(index, item) {
|
||||
var $item = $(item);
|
||||
if ($item.data('original-index') === original_index) {
|
||||
$item.prop('selected', selected);
|
||||
if(selected){
|
||||
$item.attr('data-sortindex', dualListbox.sortIndex);
|
||||
dualListbox.sortIndex++;
|
||||
} else {
|
||||
$item.removeAttr('data-sortindex');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function formatString(s, args) {
|
||||
return s.replace(/\{(\d+)\}/g, function(match, number) {
|
||||
return typeof args[number] !== 'undefined' ? args[number] : match;
|
||||
});
|
||||
}
|
||||
|
||||
function refreshInfo(dualListbox) {
|
||||
if (!dualListbox.settings.infoText) {
|
||||
return;
|
||||
}
|
||||
|
||||
var visible1 = dualListbox.elements.select1.find('option').length,
|
||||
visible2 = dualListbox.elements.select2.find('option').length,
|
||||
all1 = dualListbox.element.find('option').length - dualListbox.selectedElements,
|
||||
all2 = dualListbox.selectedElements,
|
||||
content = '';
|
||||
|
||||
if (all1 === 0) {
|
||||
content = dualListbox.settings.infoTextEmpty;
|
||||
} else if (visible1 === all1) {
|
||||
content = formatString(dualListbox.settings.infoText, [visible1, all1]);
|
||||
} else {
|
||||
content = formatString(dualListbox.settings.infoTextFiltered, [visible1, all1]);
|
||||
}
|
||||
|
||||
dualListbox.elements.info1.html(content);
|
||||
dualListbox.elements.box1.toggleClass('filtered', !(visible1 === all1 || all1 === 0));
|
||||
|
||||
if (all2 === 0) {
|
||||
content = dualListbox.settings.infoTextEmpty;
|
||||
} else if (visible2 === all2) {
|
||||
content = formatString(dualListbox.settings.infoText, [visible2, all2]);
|
||||
} else {
|
||||
content = formatString(dualListbox.settings.infoTextFiltered, [visible2, all2]);
|
||||
}
|
||||
|
||||
dualListbox.elements.info2.html(content);
|
||||
dualListbox.elements.box2.toggleClass('filtered', !(visible2 === all2 || all2 === 0));
|
||||
}
|
||||
|
||||
function refreshSelects(dualListbox) {
|
||||
dualListbox.selectedElements = 0;
|
||||
|
||||
dualListbox.elements.select1.empty();
|
||||
dualListbox.elements.select2.empty();
|
||||
|
||||
dualListbox.element.find('option').each(function(index, item) {
|
||||
var $item = $(item);
|
||||
if ($item.prop('selected')) {
|
||||
dualListbox.selectedElements++;
|
||||
dualListbox.elements.select2.append($item.clone(true).prop('selected', $item.data('_selected')));
|
||||
} else {
|
||||
dualListbox.elements.select1.append($item.clone(true).prop('selected', $item.data('_selected')));
|
||||
}
|
||||
});
|
||||
|
||||
if (dualListbox.settings.showFilterInputs) {
|
||||
filter(dualListbox, 1);
|
||||
filter(dualListbox, 2);
|
||||
}
|
||||
refreshInfo(dualListbox);
|
||||
}
|
||||
|
||||
function filter(dualListbox, selectIndex) {
|
||||
if (!dualListbox.settings.showFilterInputs) {
|
||||
return;
|
||||
}
|
||||
|
||||
saveSelections(dualListbox, selectIndex);
|
||||
|
||||
dualListbox.elements['select'+selectIndex].empty().scrollTop(0);
|
||||
var regex = new RegExp($.trim(dualListbox.elements['filterInput'+selectIndex].val()), 'gi'),
|
||||
allOptions = dualListbox.element.find('option'),
|
||||
options = dualListbox.element;
|
||||
|
||||
if (selectIndex === 1) {
|
||||
options = allOptions.not(':selected');
|
||||
} else {
|
||||
options = options.find('option:selected');
|
||||
}
|
||||
|
||||
options.each(function(index, item) {
|
||||
var $item = $(item),
|
||||
isFiltered = true;
|
||||
if (item.text.match(regex) || (dualListbox.settings.filterOnValues && $item.attr('value').match(regex) ) ) {
|
||||
isFiltered = false;
|
||||
dualListbox.elements['select'+selectIndex].append($item.clone(true).prop('selected', $item.data('_selected')));
|
||||
}
|
||||
allOptions.eq($item.data('original-index')).data('filtered'+selectIndex, isFiltered);
|
||||
});
|
||||
|
||||
refreshInfo(dualListbox);
|
||||
}
|
||||
|
||||
function saveSelections(dualListbox, selectIndex) {
|
||||
var options = dualListbox.element.find('option');
|
||||
dualListbox.elements['select'+selectIndex].find('option').each(function(index, item) {
|
||||
var $item = $(item);
|
||||
options.eq($item.data('original-index')).data('_selected', $item.prop('selected'));
|
||||
});
|
||||
}
|
||||
|
||||
function sortOptionsByInputOrder(select){
|
||||
var selectopt = select.children('option');
|
||||
|
||||
selectopt.sort(function(a,b){
|
||||
var an = parseInt(a.getAttribute('data-sortindex')),
|
||||
bn = parseInt(b.getAttribute('data-sortindex'));
|
||||
|
||||
if(an > bn) {
|
||||
return 1;
|
||||
}
|
||||
if(an < bn) {
|
||||
return -1;
|
||||
}
|
||||
return 0;
|
||||
});
|
||||
|
||||
selectopt.detach().appendTo(select);
|
||||
}
|
||||
|
||||
function sortOptions(select) {
|
||||
select.find('option').sort(function(a, b) {
|
||||
return ($(a).data('original-index') > $(b).data('original-index')) ? 1 : -1;
|
||||
}).appendTo(select);
|
||||
}
|
||||
|
||||
function clearSelections(dualListbox) {
|
||||
dualListbox.elements.select1.find('option').each(function() {
|
||||
dualListbox.element.find('option').data('_selected', false);
|
||||
});
|
||||
}
|
||||
|
||||
function move(dualListbox) {
|
||||
if (dualListbox.settings.preserveSelectionOnMove === 'all' && !dualListbox.settings.moveOnSelect) {
|
||||
saveSelections(dualListbox, 1);
|
||||
saveSelections(dualListbox, 2);
|
||||
} else if (dualListbox.settings.preserveSelectionOnMove === 'moved' && !dualListbox.settings.moveOnSelect) {
|
||||
saveSelections(dualListbox, 1);
|
||||
}
|
||||
|
||||
dualListbox.elements.select1.find('option:selected').each(function(index, item) {
|
||||
var $item = $(item);
|
||||
if (!$item.data('filtered1')) {
|
||||
changeSelectionState(dualListbox, $item.data('original-index'), true);
|
||||
}
|
||||
});
|
||||
|
||||
refreshSelects(dualListbox);
|
||||
triggerChangeEvent(dualListbox);
|
||||
if(dualListbox.settings.sortByInputOrder){
|
||||
sortOptionsByInputOrder(dualListbox.elements.select2);
|
||||
} else {
|
||||
sortOptions(dualListbox.elements.select2);
|
||||
}
|
||||
}
|
||||
|
||||
function remove(dualListbox) {
|
||||
if (dualListbox.settings.preserveSelectionOnMove === 'all' && !dualListbox.settings.moveOnSelect) {
|
||||
saveSelections(dualListbox, 1);
|
||||
saveSelections(dualListbox, 2);
|
||||
} else if (dualListbox.settings.preserveSelectionOnMove === 'moved' && !dualListbox.settings.moveOnSelect) {
|
||||
saveSelections(dualListbox, 2);
|
||||
}
|
||||
|
||||
dualListbox.elements.select2.find('option:selected').each(function(index, item) {
|
||||
var $item = $(item);
|
||||
if (!$item.data('filtered2')) {
|
||||
changeSelectionState(dualListbox, $item.data('original-index'), false);
|
||||
}
|
||||
});
|
||||
|
||||
refreshSelects(dualListbox);
|
||||
triggerChangeEvent(dualListbox);
|
||||
sortOptions(dualListbox.elements.select1);
|
||||
if(dualListbox.settings.sortByInputOrder){
|
||||
sortOptionsByInputOrder(dualListbox.elements.select2);
|
||||
}
|
||||
}
|
||||
|
||||
function moveAll(dualListbox) {
|
||||
if (dualListbox.settings.preserveSelectionOnMove === 'all' && !dualListbox.settings.moveOnSelect) {
|
||||
saveSelections(dualListbox, 1);
|
||||
saveSelections(dualListbox, 2);
|
||||
} else if (dualListbox.settings.preserveSelectionOnMove === 'moved' && !dualListbox.settings.moveOnSelect) {
|
||||
saveSelections(dualListbox, 1);
|
||||
}
|
||||
|
||||
dualListbox.element.find('option').each(function(index, item) {
|
||||
var $item = $(item);
|
||||
if (!$item.data('filtered1')) {
|
||||
$item.prop('selected', true);
|
||||
$item.attr('data-sortindex', dualListbox.sortIndex);
|
||||
dualListbox.sortIndex++;
|
||||
}
|
||||
});
|
||||
|
||||
refreshSelects(dualListbox);
|
||||
triggerChangeEvent(dualListbox);
|
||||
}
|
||||
|
||||
function removeAll(dualListbox) {
|
||||
if (dualListbox.settings.preserveSelectionOnMove === 'all' && !dualListbox.settings.moveOnSelect) {
|
||||
saveSelections(dualListbox, 1);
|
||||
saveSelections(dualListbox, 2);
|
||||
} else if (dualListbox.settings.preserveSelectionOnMove === 'moved' && !dualListbox.settings.moveOnSelect) {
|
||||
saveSelections(dualListbox, 2);
|
||||
}
|
||||
|
||||
dualListbox.element.find('option').each(function(index, item) {
|
||||
var $item = $(item);
|
||||
if (!$item.data('filtered2')) {
|
||||
$item.prop('selected', false);
|
||||
$item.removeAttr('data-sortindex');
|
||||
}
|
||||
});
|
||||
|
||||
refreshSelects(dualListbox);
|
||||
triggerChangeEvent(dualListbox);
|
||||
}
|
||||
|
||||
function bindEvents(dualListbox) {
|
||||
dualListbox.elements.form.submit(function(e) {
|
||||
if (dualListbox.elements.filterInput1.is(':focus')) {
|
||||
e.preventDefault();
|
||||
dualListbox.elements.filterInput1.focusout();
|
||||
} else if (dualListbox.elements.filterInput2.is(':focus')) {
|
||||
e.preventDefault();
|
||||
dualListbox.elements.filterInput2.focusout();
|
||||
}
|
||||
});
|
||||
|
||||
dualListbox.element.on('bootstrapDualListbox.refresh', function(e, mustClearSelections){
|
||||
dualListbox.refresh(mustClearSelections);
|
||||
});
|
||||
|
||||
dualListbox.elements.filterClear1.on('click', function() {
|
||||
dualListbox.setNonSelectedFilter('', true);
|
||||
});
|
||||
|
||||
dualListbox.elements.filterClear2.on('click', function() {
|
||||
dualListbox.setSelectedFilter('', true);
|
||||
});
|
||||
|
||||
if (dualListbox.settings.eventMoveOverride === false) {
|
||||
dualListbox.elements.moveButton.on('click', function() {
|
||||
move(dualListbox);
|
||||
});
|
||||
}
|
||||
|
||||
if (dualListbox.settings.eventMoveAllOverride === false) {
|
||||
dualListbox.elements.moveAllButton.on('click', function() {
|
||||
moveAll(dualListbox);
|
||||
});
|
||||
}
|
||||
|
||||
if (dualListbox.settings.eventRemoveOverride === false) {
|
||||
dualListbox.elements.removeButton.on('click', function() {
|
||||
remove(dualListbox);
|
||||
});
|
||||
}
|
||||
|
||||
if (dualListbox.settings.eventRemoveAllOverride === false) {
|
||||
dualListbox.elements.removeAllButton.on('click', function() {
|
||||
removeAll(dualListbox);
|
||||
});
|
||||
}
|
||||
|
||||
dualListbox.elements.filterInput1.on('change keyup', function() {
|
||||
filter(dualListbox, 1);
|
||||
});
|
||||
|
||||
dualListbox.elements.filterInput2.on('change keyup', function() {
|
||||
filter(dualListbox, 2);
|
||||
});
|
||||
}
|
||||
|
||||
BootstrapDualListbox.prototype = {
|
||||
init: function () {
|
||||
// Add the custom HTML template
|
||||
this.container = $('' +
|
||||
'<div class="bootstrap-duallistbox-container">' +
|
||||
' <div class="box1">' +
|
||||
' <label></label>' +
|
||||
' <span class="info-container">' +
|
||||
' <span class="info"></span>' +
|
||||
' <button type="button" class="btn clear1 pull-right"></button>' +
|
||||
' </span>' +
|
||||
' <input class="filter" type="text">' +
|
||||
' <div class="btn-group buttons">' +
|
||||
' <button type="button" class="btn moveall">' +
|
||||
' <i></i>' +
|
||||
' <i></i>' +
|
||||
' </button>' +
|
||||
' <button type="button" class="btn move">' +
|
||||
' <i></i>' +
|
||||
' </button>' +
|
||||
' </div>' +
|
||||
' <select multiple="multiple"></select>' +
|
||||
' </div>' +
|
||||
' <div class="box2">' +
|
||||
' <label></label>' +
|
||||
' <span class="info-container">' +
|
||||
' <span class="info"></span>' +
|
||||
' <button type="button" class="btn clear2 pull-right"></button>' +
|
||||
' </span>' +
|
||||
' <input class="filter" type="text">' +
|
||||
' <div class="btn-group buttons">' +
|
||||
' <button type="button" class="btn remove">' +
|
||||
' <i></i>' +
|
||||
' </button>' +
|
||||
' <button type="button" class="btn removeall">' +
|
||||
' <i></i>' +
|
||||
' <i></i>' +
|
||||
' </button>' +
|
||||
' </div>' +
|
||||
' <select multiple="multiple"></select>' +
|
||||
' </div>' +
|
||||
'</div>')
|
||||
.insertBefore(this.element);
|
||||
|
||||
// Cache the inner elements
|
||||
this.elements = {
|
||||
originalSelect: this.element,
|
||||
box1: $('.box1', this.container),
|
||||
box2: $('.box2', this.container),
|
||||
filterInput1: $('.box1 .filter', this.container),
|
||||
filterInput2: $('.box2 .filter', this.container),
|
||||
filterClear1: $('.box1 .clear1', this.container),
|
||||
filterClear2: $('.box2 .clear2', this.container),
|
||||
label1: $('.box1 > label', this.container),
|
||||
label2: $('.box2 > label', this.container),
|
||||
info1: $('.box1 .info', this.container),
|
||||
info2: $('.box2 .info', this.container),
|
||||
select1: $('.box1 select', this.container),
|
||||
select2: $('.box2 select', this.container),
|
||||
moveButton: $('.box1 .move', this.container),
|
||||
removeButton: $('.box2 .remove', this.container),
|
||||
moveAllButton: $('.box1 .moveall', this.container),
|
||||
removeAllButton: $('.box2 .removeall', this.container),
|
||||
form: $($('.box1 .filter', this.container)[0].form)
|
||||
};
|
||||
|
||||
// Set select IDs
|
||||
this.originalSelectName = this.element.attr('name') || '';
|
||||
var select1Id = 'bootstrap-duallistbox-nonselected-list_' + this.originalSelectName,
|
||||
select2Id = 'bootstrap-duallistbox-selected-list_' + this.originalSelectName;
|
||||
this.elements.select1.attr('id', select1Id);
|
||||
this.elements.select2.attr('id', select2Id);
|
||||
this.elements.label1.attr('for', select1Id);
|
||||
this.elements.label2.attr('for', select2Id);
|
||||
|
||||
// Apply all settings
|
||||
this.selectedElements = 0;
|
||||
this.sortIndex = 0;
|
||||
this.elementCount = 0;
|
||||
this.setBootstrap2Compatible(this.settings.bootstrap2Compatible);
|
||||
this.setFilterTextClear(this.settings.filterTextClear);
|
||||
this.setFilterPlaceHolder(this.settings.filterPlaceHolder);
|
||||
this.setMoveSelectedLabel(this.settings.moveSelectedLabel);
|
||||
this.setMoveAllLabel(this.settings.moveAllLabel);
|
||||
this.setRemoveSelectedLabel(this.settings.removeSelectedLabel);
|
||||
this.setRemoveAllLabel(this.settings.removeAllLabel);
|
||||
this.setMoveOnSelect(this.settings.moveOnSelect);
|
||||
this.setMoveOnDoubleClick(this.settings.moveOnDoubleClick);
|
||||
this.setPreserveSelectionOnMove(this.settings.preserveSelectionOnMove);
|
||||
this.setSelectedListLabel(this.settings.selectedListLabel);
|
||||
this.setNonSelectedListLabel(this.settings.nonSelectedListLabel);
|
||||
this.setHelperSelectNamePostfix(this.settings.helperSelectNamePostfix);
|
||||
this.setSelectOrMinimalHeight(this.settings.selectorMinimalHeight);
|
||||
|
||||
updateSelectionStates(this);
|
||||
|
||||
this.setShowFilterInputs(this.settings.showFilterInputs);
|
||||
this.setNonSelectedFilter(this.settings.nonSelectedFilter);
|
||||
this.setSelectedFilter(this.settings.selectedFilter);
|
||||
this.setInfoText(this.settings.infoText);
|
||||
this.setInfoTextFiltered(this.settings.infoTextFiltered);
|
||||
this.setInfoTextEmpty(this.settings.infoTextEmpty);
|
||||
this.setFilterOnValues(this.settings.filterOnValues);
|
||||
this.setSortByInputOrder(this.settings.sortByInputOrder);
|
||||
this.setEventMoveOverride(this.settings.eventMoveOverride);
|
||||
this.setEventMoveAllOverride(this.settings.eventMoveAllOverride);
|
||||
this.setEventRemoveOverride(this.settings.eventRemoveOverride);
|
||||
this.setEventRemoveAllOverride(this.settings.eventRemoveAllOverride);
|
||||
|
||||
// Hide the original select
|
||||
this.element.hide();
|
||||
|
||||
bindEvents(this);
|
||||
refreshSelects(this);
|
||||
|
||||
return this.element;
|
||||
},
|
||||
setBootstrap2Compatible: function(value, refresh) {
|
||||
this.settings.bootstrap2Compatible = value;
|
||||
if (value) {
|
||||
this.container.removeClass('row').addClass('row-fluid bs2compatible');
|
||||
this.container.find('.box1, .box2').removeClass('col-md-6').addClass('span6');
|
||||
this.container.find('.clear1, .clear2').removeClass('btn-white btn-xs').addClass('btn-mini');
|
||||
this.container.find('input, select').removeClass('form-control');
|
||||
this.container.find('.btn').removeClass('btn-white');
|
||||
this.container.find('.moveall > i, .move > i').removeClass('glyphicon glyphicon-arrow-right').addClass('icon-arrow-right');
|
||||
this.container.find('.removeall > i, .remove > i').removeClass('glyphicon glyphicon-arrow-left').addClass('icon-arrow-left');
|
||||
} else {
|
||||
this.container.removeClass('row-fluid bs2compatible').addClass('row');
|
||||
this.container.find('.box1, .box2').removeClass('span6').addClass('col-md-6');
|
||||
this.container.find('.clear1, .clear2').removeClass('btn-mini').addClass('btn-white btn-xs');
|
||||
this.container.find('input, select').addClass('form-control');
|
||||
this.container.find('.btn').addClass('btn-white');
|
||||
this.container.find('.moveall > i, .move > i').removeClass('icon-arrow-right').addClass('glyphicon glyphicon-arrow-right');
|
||||
this.container.find('.removeall > i, .remove > i').removeClass('icon-arrow-left').addClass('glyphicon glyphicon-arrow-left');
|
||||
}
|
||||
if (refresh) {
|
||||
refreshSelects(this);
|
||||
}
|
||||
return this.element;
|
||||
},
|
||||
setFilterTextClear: function(value, refresh) {
|
||||
this.settings.filterTextClear = value;
|
||||
this.elements.filterClear1.html(value);
|
||||
this.elements.filterClear2.html(value);
|
||||
if (refresh) {
|
||||
refreshSelects(this);
|
||||
}
|
||||
return this.element;
|
||||
},
|
||||
setFilterPlaceHolder: function(value, refresh) {
|
||||
this.settings.filterPlaceHolder = value;
|
||||
this.elements.filterInput1.attr('placeholder', value);
|
||||
this.elements.filterInput2.attr('placeholder', value);
|
||||
if (refresh) {
|
||||
refreshSelects(this);
|
||||
}
|
||||
return this.element;
|
||||
},
|
||||
setMoveSelectedLabel: function(value, refresh) {
|
||||
this.settings.moveSelectedLabel = value;
|
||||
this.elements.moveButton.attr('title', value);
|
||||
if (refresh) {
|
||||
refreshSelects(this);
|
||||
}
|
||||
return this.element;
|
||||
},
|
||||
setMoveAllLabel: function(value, refresh) {
|
||||
this.settings.moveAllLabel = value;
|
||||
this.elements.moveAllButton.attr('title', value);
|
||||
if (refresh) {
|
||||
refreshSelects(this);
|
||||
}
|
||||
return this.element;
|
||||
},
|
||||
setRemoveSelectedLabel: function(value, refresh) {
|
||||
this.settings.removeSelectedLabel = value;
|
||||
this.elements.removeButton.attr('title', value);
|
||||
if (refresh) {
|
||||
refreshSelects(this);
|
||||
}
|
||||
return this.element;
|
||||
},
|
||||
setRemoveAllLabel: function(value, refresh) {
|
||||
this.settings.removeAllLabel = value;
|
||||
this.elements.removeAllButton.attr('title', value);
|
||||
if (refresh) {
|
||||
refreshSelects(this);
|
||||
}
|
||||
return this.element;
|
||||
},
|
||||
setMoveOnSelect: function(value, refresh) {
|
||||
if (isBuggyAndroid) {
|
||||
value = true;
|
||||
}
|
||||
this.settings.moveOnSelect = value;
|
||||
if (this.settings.moveOnSelect) {
|
||||
this.container.addClass('moveonselect');
|
||||
var self = this;
|
||||
this.elements.select1.on('change', function() {
|
||||
move(self);
|
||||
});
|
||||
this.elements.select2.on('change', function() {
|
||||
remove(self);
|
||||
});
|
||||
} else {
|
||||
this.container.removeClass('moveonselect');
|
||||
this.elements.select1.off('change');
|
||||
this.elements.select2.off('change');
|
||||
}
|
||||
if (refresh) {
|
||||
refreshSelects(this);
|
||||
}
|
||||
return this.element;
|
||||
},
|
||||
setMoveOnDoubleClick: function(value, refresh) {
|
||||
if (isBuggyAndroid) {
|
||||
value = false;
|
||||
}
|
||||
this.settings.moveOnDoubleClick = value;
|
||||
if (this.settings.moveOnDoubleClick) {
|
||||
this.container.addClass('moveondoubleclick');
|
||||
var self = this;
|
||||
this.elements.select1.on('dblclick', function() {
|
||||
move(self);
|
||||
});
|
||||
this.elements.select2.on('dblclick', function() {
|
||||
remove(self);
|
||||
});
|
||||
} else {
|
||||
this.container.removeClass('moveondoubleclick');
|
||||
this.elements.select1.off('dblclick');
|
||||
this.elements.select2.off('dblclick');
|
||||
}
|
||||
if (refresh) {
|
||||
refreshSelects(this);
|
||||
}
|
||||
return this.element;
|
||||
},
|
||||
setPreserveSelectionOnMove: function(value, refresh) {
|
||||
// We are forcing to move on select and disabling preserveSelectionOnMove on Android
|
||||
if (isBuggyAndroid) {
|
||||
value = false;
|
||||
}
|
||||
this.settings.preserveSelectionOnMove = value;
|
||||
if (refresh) {
|
||||
refreshSelects(this);
|
||||
}
|
||||
return this.element;
|
||||
},
|
||||
setSelectedListLabel: function(value, refresh) {
|
||||
this.settings.selectedListLabel = value;
|
||||
if (value) {
|
||||
this.elements.label2.show().html(value);
|
||||
} else {
|
||||
this.elements.label2.hide().html(value);
|
||||
}
|
||||
if (refresh) {
|
||||
refreshSelects(this);
|
||||
}
|
||||
return this.element;
|
||||
},
|
||||
setNonSelectedListLabel: function(value, refresh) {
|
||||
this.settings.nonSelectedListLabel = value;
|
||||
if (value) {
|
||||
this.elements.label1.show().html(value);
|
||||
} else {
|
||||
this.elements.label1.hide().html(value);
|
||||
}
|
||||
if (refresh) {
|
||||
refreshSelects(this);
|
||||
}
|
||||
return this.element;
|
||||
},
|
||||
setHelperSelectNamePostfix: function(value, refresh) {
|
||||
this.settings.helperSelectNamePostfix = value;
|
||||
if (value) {
|
||||
this.elements.select1.attr('name', this.originalSelectName + value + '1');
|
||||
this.elements.select2.attr('name', this.originalSelectName + value + '2');
|
||||
} else {
|
||||
this.elements.select1.removeAttr('name');
|
||||
this.elements.select2.removeAttr('name');
|
||||
}
|
||||
if (refresh) {
|
||||
refreshSelects(this);
|
||||
}
|
||||
return this.element;
|
||||
},
|
||||
setSelectOrMinimalHeight: function(value, refresh) {
|
||||
this.settings.selectorMinimalHeight = value;
|
||||
var height = this.element.height();
|
||||
if (this.element.height() < value) {
|
||||
height = value;
|
||||
}
|
||||
this.elements.select1.height(height);
|
||||
this.elements.select2.height(height);
|
||||
if (refresh) {
|
||||
refreshSelects(this);
|
||||
}
|
||||
return this.element;
|
||||
},
|
||||
setShowFilterInputs: function(value, refresh) {
|
||||
if (!value) {
|
||||
this.setNonSelectedFilter('');
|
||||
this.setSelectedFilter('');
|
||||
refreshSelects(this);
|
||||
this.elements.filterInput1.hide();
|
||||
this.elements.filterInput2.hide();
|
||||
} else {
|
||||
this.elements.filterInput1.show();
|
||||
this.elements.filterInput2.show();
|
||||
}
|
||||
this.settings.showFilterInputs = value;
|
||||
if (refresh) {
|
||||
refreshSelects(this);
|
||||
}
|
||||
return this.element;
|
||||
},
|
||||
setNonSelectedFilter: function(value, refresh) {
|
||||
if (this.settings.showFilterInputs) {
|
||||
this.settings.nonSelectedFilter = value;
|
||||
this.elements.filterInput1.val(value);
|
||||
if (refresh) {
|
||||
refreshSelects(this);
|
||||
}
|
||||
return this.element;
|
||||
}
|
||||
},
|
||||
setSelectedFilter: function(value, refresh) {
|
||||
if (this.settings.showFilterInputs) {
|
||||
this.settings.selectedFilter = value;
|
||||
this.elements.filterInput2.val(value);
|
||||
if (refresh) {
|
||||
refreshSelects(this);
|
||||
}
|
||||
return this.element;
|
||||
}
|
||||
},
|
||||
setInfoText: function(value, refresh) {
|
||||
this.settings.infoText = value;
|
||||
if (value) {
|
||||
this.elements.info1.show();
|
||||
this.elements.info2.show();
|
||||
} else {
|
||||
this.elements.info1.hide();
|
||||
this.elements.info2.hide();
|
||||
}
|
||||
if (refresh) {
|
||||
refreshSelects(this);
|
||||
}
|
||||
return this.element;
|
||||
},
|
||||
setInfoTextFiltered: function(value, refresh) {
|
||||
this.settings.infoTextFiltered = value;
|
||||
if (refresh) {
|
||||
refreshSelects(this);
|
||||
}
|
||||
return this.element;
|
||||
},
|
||||
setInfoTextEmpty: function(value, refresh) {
|
||||
this.settings.infoTextEmpty = value;
|
||||
if (refresh) {
|
||||
refreshSelects(this);
|
||||
}
|
||||
return this.element;
|
||||
},
|
||||
setFilterOnValues: function(value, refresh) {
|
||||
this.settings.filterOnValues = value;
|
||||
if (refresh) {
|
||||
refreshSelects(this);
|
||||
}
|
||||
return this.element;
|
||||
},
|
||||
setSortByInputOrder: function(value, refresh){
|
||||
this.settings.sortByInputOrder = value;
|
||||
if (refresh) {
|
||||
refreshSelects(this);
|
||||
}
|
||||
return this.element;
|
||||
},
|
||||
setEventMoveOverride: function(value, refresh) {
|
||||
this.settings.eventMoveOverride = value;
|
||||
if (refresh) {
|
||||
refreshSelects(this);
|
||||
}
|
||||
return this.element;
|
||||
},
|
||||
setEventMoveAllOverride: function(value, refresh) {
|
||||
this.settings.eventMoveAllOverride = value;
|
||||
if (refresh) {
|
||||
refreshSelects(this);
|
||||
}
|
||||
return this.element;
|
||||
},
|
||||
setEventRemoveOverride: function(value, refresh) {
|
||||
this.settings.eventRemoveOverride = value;
|
||||
if (refresh) {
|
||||
refreshSelects(this);
|
||||
}
|
||||
return this.element;
|
||||
},
|
||||
setEventRemoveAllOverride: function(value, refresh) {
|
||||
this.settings.eventRemoveAllOverride = value;
|
||||
if (refresh) {
|
||||
refreshSelects(this);
|
||||
}
|
||||
return this.element;
|
||||
},
|
||||
getContainer: function() {
|
||||
return this.container;
|
||||
},
|
||||
refresh: function(mustClearSelections) {
|
||||
updateSelectionStates(this);
|
||||
|
||||
if (!mustClearSelections) {
|
||||
saveSelections(this, 1);
|
||||
saveSelections(this, 2);
|
||||
} else {
|
||||
clearSelections(this);
|
||||
}
|
||||
|
||||
refreshSelects(this);
|
||||
},
|
||||
destroy: function() {
|
||||
this.container.remove();
|
||||
this.element.show();
|
||||
$.data(this, 'plugin_' + pluginName, null);
|
||||
return this.element;
|
||||
}
|
||||
};
|
||||
|
||||
// A really lightweight plugin wrapper around the constructor,
|
||||
// preventing against multiple instantiations
|
||||
$.fn[ pluginName ] = function (options) {
|
||||
var args = arguments;
|
||||
|
||||
// Is the first parameter an object (options), or was omitted, instantiate a new instance of the plugin.
|
||||
if (options === undefined || typeof options === 'object') {
|
||||
return this.each(function () {
|
||||
// If this is not a select
|
||||
if (!$(this).is('select')) {
|
||||
$(this).find('select').each(function(index, item) {
|
||||
// For each nested select, instantiate the Dual List Box
|
||||
$(item).bootstrapDualListbox(options);
|
||||
});
|
||||
} else if (!$.data(this, 'plugin_' + pluginName)) {
|
||||
// Only allow the plugin to be instantiated once so we check that the element has no plugin instantiation yet
|
||||
|
||||
// if it has no instance, create a new one, pass options to our plugin constructor,
|
||||
// and store the plugin instance in the elements jQuery data object.
|
||||
$.data(this, 'plugin_' + pluginName, new BootstrapDualListbox(this, options));
|
||||
}
|
||||
});
|
||||
// If the first parameter is a string and it doesn't start with an underscore or "contains" the `init`-function,
|
||||
// treat this as a call to a public method.
|
||||
} else if (typeof options === 'string' && options[0] !== '_' && options !== 'init') {
|
||||
|
||||
// Cache the method call to make it possible to return a value
|
||||
var returns;
|
||||
|
||||
this.each(function () {
|
||||
var instance = $.data(this, 'plugin_' + pluginName);
|
||||
// Tests that there's already a plugin-instance and checks that the requested public method exists
|
||||
if (instance instanceof BootstrapDualListbox && typeof instance[options] === 'function') {
|
||||
// Call the method of our plugin instance, and pass it the supplied arguments.
|
||||
returns = instance[options].apply(instance, Array.prototype.slice.call(args, 1));
|
||||
}
|
||||
});
|
||||
|
||||
// If the earlier cached method gives a value back return the value,
|
||||
// otherwise return this to preserve chainability.
|
||||
return returns !== undefined ? returns : this;
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
})(jQuery, window, document);
|
||||
1
ruoyi-admin/src/main/resources/static/ajax/libs/duallistbox/bootstrap-duallistbox.min.css
vendored
Normal file
1
ruoyi-admin/src/main/resources/static/ajax/libs/duallistbox/bootstrap-duallistbox.min.css
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
.bootstrap-duallistbox-container .buttons{width:100%;margin-bottom:-1px}.bootstrap-duallistbox-container label{display:block}.bootstrap-duallistbox-container .info{display:inline-block;margin-bottom:5px;font-size:11px}.bootstrap-duallistbox-container .clear1,.bootstrap-duallistbox-container .clear2{display:none;font-size:10px}.bootstrap-duallistbox-container .box1.filtered .clear1,.bootstrap-duallistbox-container .box2.filtered .clear2{display:inline-block}.bootstrap-duallistbox-container .move,.bootstrap-duallistbox-container .remove{width:60%}.bootstrap-duallistbox-container .btn-group .btn{border-bottom-left-radius:0;border-bottom-right-radius:0}.bootstrap-duallistbox-container select{border-top-left-radius:0;border-top-right-radius:0}.bootstrap-duallistbox-container .moveall,.bootstrap-duallistbox-container .removeall{width:40%}.bootstrap-duallistbox-container.bs2compatible .btn-group>.btn+.btn{margin-left:0}.bootstrap-duallistbox-container select{width:100%;height:300px;padding:0}.bootstrap-duallistbox-container .filter{display:inline-block;width:100%;height:31px;margin:0 0 5px 0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.bootstrap-duallistbox-container .filter.placeholder{color:#aaa}.bootstrap-duallistbox-container.moveonselect .move,.bootstrap-duallistbox-container.moveonselect .remove{display:none}.bootstrap-duallistbox-container.moveonselect .moveall,.bootstrap-duallistbox-container.moveonselect .removeall{width:100%}
|
||||
10
ruoyi-admin/src/main/resources/static/ajax/libs/duallistbox/bootstrap-duallistbox.min.js
vendored
Normal file
10
ruoyi-admin/src/main/resources/static/ajax/libs/duallistbox/bootstrap-duallistbox.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,621 @@
|
|||
/*!
|
||||
* Jasny Bootstrap v3.1.3 (http://jasny.github.io/bootstrap)
|
||||
* Copyright 2012-2014 Arnold Daniels
|
||||
* Licensed under Apache-2.0 (https://github.com/jasny/bootstrap/blob/master/LICENSE)
|
||||
*/
|
||||
|
||||
.container-smooth {
|
||||
max-width: 1170px;
|
||||
}
|
||||
@media (min-width: 1px) {
|
||||
.container-smooth {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
.btn-labeled {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.btn-label {
|
||||
position: relative;
|
||||
left: -12px;
|
||||
display: inline-block;
|
||||
padding: 6px 12px;
|
||||
background: transparent;
|
||||
background: rgba(0, 0, 0, .15);
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
.btn-label.btn-label-right {
|
||||
right: -12px;
|
||||
left: auto;
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
.btn-lg .btn-label {
|
||||
left: -16px;
|
||||
padding: 10px 16px;
|
||||
border-radius: 5px 0 0 5px;
|
||||
}
|
||||
.btn-lg .btn-label.btn-label-right {
|
||||
right: -16px;
|
||||
left: auto;
|
||||
border-radius: 0 5px 5px 0;
|
||||
}
|
||||
.btn-sm .btn-label {
|
||||
left: -10px;
|
||||
padding: 5px 10px;
|
||||
border-radius: 2px 0 0 2px;
|
||||
}
|
||||
.btn-sm .btn-label.btn-label-right {
|
||||
right: -10px;
|
||||
left: auto;
|
||||
border-radius: 0 2px 2px 0;
|
||||
}
|
||||
.btn-xs .btn-label {
|
||||
left: -5px;
|
||||
padding: 1px 5px;
|
||||
border-radius: 2px 0 0 2px;
|
||||
}
|
||||
.btn-xs .btn-label.btn-label-right {
|
||||
right: -5px;
|
||||
left: auto;
|
||||
border-radius: 0 2px 2px 0;
|
||||
}
|
||||
.nav-tabs-bottom {
|
||||
border-top: 1px solid #ddd;
|
||||
border-bottom: 0;
|
||||
}
|
||||
.nav-tabs-bottom > li {
|
||||
margin-top: -1px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.nav-tabs-bottom > li > a {
|
||||
border-radius: 0 0 4px 4px;
|
||||
}
|
||||
.nav-tabs-bottom > li > a:hover,
|
||||
.nav-tabs-bottom > li > a:focus,
|
||||
.nav-tabs-bottom > li.active > a,
|
||||
.nav-tabs-bottom > li.active > a:hover,
|
||||
.nav-tabs-bottom > li.active > a:focus {
|
||||
border: 1px solid #ddd;
|
||||
border-top-color: transparent;
|
||||
}
|
||||
.nav-tabs-left {
|
||||
border-right: 1px solid #ddd;
|
||||
border-bottom: 0;
|
||||
}
|
||||
.nav-tabs-left > li {
|
||||
float: none;
|
||||
margin-right: -1px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.nav-tabs-left > li > a {
|
||||
margin-right: 0;
|
||||
margin-bottom: 2px;
|
||||
border-radius: 4px 0 0 4px;
|
||||
}
|
||||
.nav-tabs-left > li > a:hover,
|
||||
.nav-tabs-left > li > a:focus,
|
||||
.nav-tabs-left > li.active > a,
|
||||
.nav-tabs-left > li.active > a:hover,
|
||||
.nav-tabs-left > li.active > a:focus {
|
||||
border: 1px solid #ddd;
|
||||
border-right-color: transparent;
|
||||
}
|
||||
.row > .nav-tabs-left {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding-right: 0;
|
||||
padding-left: 15px;
|
||||
margin-right: -1px;
|
||||
}
|
||||
.row > .nav-tabs-left + .tab-content {
|
||||
border-left: 1px solid #ddd;
|
||||
}
|
||||
.nav-tabs-right {
|
||||
border-bottom: 0;
|
||||
border-left: 1px solid #ddd;
|
||||
}
|
||||
.nav-tabs-right > li {
|
||||
float: none;
|
||||
margin-bottom: 0;
|
||||
margin-left: -1px;
|
||||
}
|
||||
.nav-tabs-right > li > a {
|
||||
margin-bottom: 2px;
|
||||
margin-left: 0;
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
.nav-tabs-right > li > a:hover,
|
||||
.nav-tabs-right > li > a:focus,
|
||||
.nav-tabs-right > li.active > a,
|
||||
.nav-tabs-right > li.active > a:hover,
|
||||
.nav-tabs-right > li.active > a:focus {
|
||||
border: 1px solid #ddd;
|
||||
border-left-color: transparent;
|
||||
}
|
||||
.row > .nav-tabs-right {
|
||||
padding-right: 15px;
|
||||
padding-left: 0;
|
||||
}
|
||||
.navmenu,
|
||||
.navbar-offcanvas {
|
||||
width: 300px;
|
||||
height: auto;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.navmenu-fixed-left,
|
||||
.navmenu-fixed-right,
|
||||
.navbar-offcanvas {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 1030;
|
||||
overflow-y: auto;
|
||||
border-radius: 0;
|
||||
}
|
||||
.navmenu-fixed-left,
|
||||
.navbar-offcanvas.navmenu-fixed-left {
|
||||
right: auto;
|
||||
left: 0;
|
||||
border-width: 0 1px 0 0;
|
||||
}
|
||||
.navmenu-fixed-right,
|
||||
.navbar-offcanvas {
|
||||
right: 0;
|
||||
left: auto;
|
||||
border-width: 0 0 0 1px;
|
||||
}
|
||||
.navmenu-nav {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.navmenu-nav.dropdown-menu {
|
||||
position: static;
|
||||
float: none;
|
||||
padding-top: 0;
|
||||
margin: 0;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
.navbar-offcanvas .navbar-nav {
|
||||
margin: 0;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.navbar-offcanvas {
|
||||
width: auto;
|
||||
border-top: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
.navbar-offcanvas.offcanvas {
|
||||
position: static;
|
||||
display: block !important;
|
||||
height: auto !important;
|
||||
padding-bottom: 0;
|
||||
overflow: visible !important;
|
||||
}
|
||||
.navbar-offcanvas .navbar-nav.navbar-left:first-child {
|
||||
margin-left: -15px;
|
||||
}
|
||||
.navbar-offcanvas .navbar-nav.navbar-right:last-child {
|
||||
margin-right: -15px;
|
||||
}
|
||||
.navbar-offcanvas .navmenu-brand {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.navmenu-brand {
|
||||
display: block;
|
||||
padding: 10px 15px;
|
||||
margin: 10px 0;
|
||||
font-size: 18px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.navmenu-brand:hover,
|
||||
.navmenu-brand:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
.navmenu-default,
|
||||
.navbar-default .navbar-offcanvas {
|
||||
background-color: #f8f8f8;
|
||||
border-color: #e7e7e7;
|
||||
}
|
||||
.navmenu-default .navmenu-brand,
|
||||
.navbar-default .navbar-offcanvas .navmenu-brand {
|
||||
color: #777;
|
||||
}
|
||||
.navmenu-default .navmenu-brand:hover,
|
||||
.navbar-default .navbar-offcanvas .navmenu-brand:hover,
|
||||
.navmenu-default .navmenu-brand:focus,
|
||||
.navbar-default .navbar-offcanvas .navmenu-brand:focus {
|
||||
color: #5e5e5e;
|
||||
background-color: transparent;
|
||||
}
|
||||
.navmenu-default .navmenu-text,
|
||||
.navbar-default .navbar-offcanvas .navmenu-text {
|
||||
color: #777;
|
||||
}
|
||||
.navmenu-default .navmenu-nav > .dropdown > a:hover .caret,
|
||||
.navbar-default .navbar-offcanvas .navmenu-nav > .dropdown > a:hover .caret,
|
||||
.navmenu-default .navmenu-nav > .dropdown > a:focus .caret,
|
||||
.navbar-default .navbar-offcanvas .navmenu-nav > .dropdown > a:focus .caret {
|
||||
border-top-color: #333;
|
||||
border-bottom-color: #333;
|
||||
}
|
||||
.navmenu-default .navmenu-nav > .open > a,
|
||||
.navbar-default .navbar-offcanvas .navmenu-nav > .open > a,
|
||||
.navmenu-default .navmenu-nav > .open > a:hover,
|
||||
.navbar-default .navbar-offcanvas .navmenu-nav > .open > a:hover,
|
||||
.navmenu-default .navmenu-nav > .open > a:focus,
|
||||
.navbar-default .navbar-offcanvas .navmenu-nav > .open > a:focus {
|
||||
color: #555;
|
||||
background-color: #e7e7e7;
|
||||
}
|
||||
.navmenu-default .navmenu-nav > .open > a .caret,
|
||||
.navbar-default .navbar-offcanvas .navmenu-nav > .open > a .caret,
|
||||
.navmenu-default .navmenu-nav > .open > a:hover .caret,
|
||||
.navbar-default .navbar-offcanvas .navmenu-nav > .open > a:hover .caret,
|
||||
.navmenu-default .navmenu-nav > .open > a:focus .caret,
|
||||
.navbar-default .navbar-offcanvas .navmenu-nav > .open > a:focus .caret {
|
||||
border-top-color: #555;
|
||||
border-bottom-color: #555;
|
||||
}
|
||||
.navmenu-default .navmenu-nav > .dropdown > a .caret,
|
||||
.navbar-default .navbar-offcanvas .navmenu-nav > .dropdown > a .caret {
|
||||
border-top-color: #777;
|
||||
border-bottom-color: #777;
|
||||
}
|
||||
.navmenu-default .navmenu-nav.dropdown-menu,
|
||||
.navbar-default .navbar-offcanvas .navmenu-nav.dropdown-menu {
|
||||
background-color: #e7e7e7;
|
||||
}
|
||||
.navmenu-default .navmenu-nav.dropdown-menu > .divider,
|
||||
.navbar-default .navbar-offcanvas .navmenu-nav.dropdown-menu > .divider {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
.navmenu-default .navmenu-nav.dropdown-menu > .active > a,
|
||||
.navbar-default .navbar-offcanvas .navmenu-nav.dropdown-menu > .active > a,
|
||||
.navmenu-default .navmenu-nav.dropdown-menu > .active > a:hover,
|
||||
.navbar-default .navbar-offcanvas .navmenu-nav.dropdown-menu > .active > a:hover,
|
||||
.navmenu-default .navmenu-nav.dropdown-menu > .active > a:focus,
|
||||
.navbar-default .navbar-offcanvas .navmenu-nav.dropdown-menu > .active > a:focus {
|
||||
background-color: #d7d7d7;
|
||||
}
|
||||
.navmenu-default .navmenu-nav > li > a,
|
||||
.navbar-default .navbar-offcanvas .navmenu-nav > li > a {
|
||||
color: #777;
|
||||
}
|
||||
.navmenu-default .navmenu-nav > li > a:hover,
|
||||
.navbar-default .navbar-offcanvas .navmenu-nav > li > a:hover,
|
||||
.navmenu-default .navmenu-nav > li > a:focus,
|
||||
.navbar-default .navbar-offcanvas .navmenu-nav > li > a:focus {
|
||||
color: #333;
|
||||
background-color: transparent;
|
||||
}
|
||||
.navmenu-default .navmenu-nav > .active > a,
|
||||
.navbar-default .navbar-offcanvas .navmenu-nav > .active > a,
|
||||
.navmenu-default .navmenu-nav > .active > a:hover,
|
||||
.navbar-default .navbar-offcanvas .navmenu-nav > .active > a:hover,
|
||||
.navmenu-default .navmenu-nav > .active > a:focus,
|
||||
.navbar-default .navbar-offcanvas .navmenu-nav > .active > a:focus {
|
||||
color: #555;
|
||||
background-color: #e7e7e7;
|
||||
}
|
||||
.navmenu-default .navmenu-nav > .disabled > a,
|
||||
.navbar-default .navbar-offcanvas .navmenu-nav > .disabled > a,
|
||||
.navmenu-default .navmenu-nav > .disabled > a:hover,
|
||||
.navbar-default .navbar-offcanvas .navmenu-nav > .disabled > a:hover,
|
||||
.navmenu-default .navmenu-nav > .disabled > a:focus,
|
||||
.navbar-default .navbar-offcanvas .navmenu-nav > .disabled > a:focus {
|
||||
color: #ccc;
|
||||
background-color: transparent;
|
||||
}
|
||||
.navmenu-inverse,
|
||||
.navbar-inverse .navbar-offcanvas {
|
||||
background-color: #222;
|
||||
border-color: #080808;
|
||||
}
|
||||
.navmenu-inverse .navmenu-brand,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-brand {
|
||||
color: #999;
|
||||
}
|
||||
.navmenu-inverse .navmenu-brand:hover,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-brand:hover,
|
||||
.navmenu-inverse .navmenu-brand:focus,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-brand:focus {
|
||||
color: #fff;
|
||||
background-color: transparent;
|
||||
}
|
||||
.navmenu-inverse .navmenu-text,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-text {
|
||||
color: #999;
|
||||
}
|
||||
.navmenu-inverse .navmenu-nav > .dropdown > a:hover .caret,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-nav > .dropdown > a:hover .caret,
|
||||
.navmenu-inverse .navmenu-nav > .dropdown > a:focus .caret,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-nav > .dropdown > a:focus .caret {
|
||||
border-top-color: #fff;
|
||||
border-bottom-color: #fff;
|
||||
}
|
||||
.navmenu-inverse .navmenu-nav > .open > a,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-nav > .open > a,
|
||||
.navmenu-inverse .navmenu-nav > .open > a:hover,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-nav > .open > a:hover,
|
||||
.navmenu-inverse .navmenu-nav > .open > a:focus,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-nav > .open > a:focus {
|
||||
color: #fff;
|
||||
background-color: #080808;
|
||||
}
|
||||
.navmenu-inverse .navmenu-nav > .open > a .caret,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-nav > .open > a .caret,
|
||||
.navmenu-inverse .navmenu-nav > .open > a:hover .caret,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-nav > .open > a:hover .caret,
|
||||
.navmenu-inverse .navmenu-nav > .open > a:focus .caret,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-nav > .open > a:focus .caret {
|
||||
border-top-color: #fff;
|
||||
border-bottom-color: #fff;
|
||||
}
|
||||
.navmenu-inverse .navmenu-nav > .dropdown > a .caret,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-nav > .dropdown > a .caret {
|
||||
border-top-color: #999;
|
||||
border-bottom-color: #999;
|
||||
}
|
||||
.navmenu-inverse .navmenu-nav.dropdown-menu,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-nav.dropdown-menu {
|
||||
background-color: #080808;
|
||||
}
|
||||
.navmenu-inverse .navmenu-nav.dropdown-menu > .divider,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-nav.dropdown-menu > .divider {
|
||||
background-color: #222;
|
||||
}
|
||||
.navmenu-inverse .navmenu-nav.dropdown-menu > .active > a,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-nav.dropdown-menu > .active > a,
|
||||
.navmenu-inverse .navmenu-nav.dropdown-menu > .active > a:hover,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-nav.dropdown-menu > .active > a:hover,
|
||||
.navmenu-inverse .navmenu-nav.dropdown-menu > .active > a:focus,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-nav.dropdown-menu > .active > a:focus {
|
||||
background-color: #000;
|
||||
}
|
||||
.navmenu-inverse .navmenu-nav > li > a,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-nav > li > a {
|
||||
color: #999;
|
||||
}
|
||||
.navmenu-inverse .navmenu-nav > li > a:hover,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-nav > li > a:hover,
|
||||
.navmenu-inverse .navmenu-nav > li > a:focus,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-nav > li > a:focus {
|
||||
color: #fff;
|
||||
background-color: transparent;
|
||||
}
|
||||
.navmenu-inverse .navmenu-nav > .active > a,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-nav > .active > a,
|
||||
.navmenu-inverse .navmenu-nav > .active > a:hover,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-nav > .active > a:hover,
|
||||
.navmenu-inverse .navmenu-nav > .active > a:focus,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-nav > .active > a:focus {
|
||||
color: #fff;
|
||||
background-color: #080808;
|
||||
}
|
||||
.navmenu-inverse .navmenu-nav > .disabled > a,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-nav > .disabled > a,
|
||||
.navmenu-inverse .navmenu-nav > .disabled > a:hover,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-nav > .disabled > a:hover,
|
||||
.navmenu-inverse .navmenu-nav > .disabled > a:focus,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-nav > .disabled > a:focus {
|
||||
color: #444;
|
||||
background-color: transparent;
|
||||
}
|
||||
.alert-fixed-top,
|
||||
.alert-fixed-bottom {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
z-index: 1035;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.alert-fixed-top,
|
||||
.alert-fixed-bottom {
|
||||
left: 50%;
|
||||
width: 992px;
|
||||
margin-left: -496px;
|
||||
}
|
||||
}
|
||||
.alert-fixed-top {
|
||||
top: 0;
|
||||
border-width: 0 0 1px 0;
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.alert-fixed-top {
|
||||
border-width: 0 1px 1px 1px;
|
||||
border-bottom-right-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
}
|
||||
}
|
||||
.alert-fixed-bottom {
|
||||
bottom: 0;
|
||||
border-width: 1px 0 0 0;
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.alert-fixed-bottom {
|
||||
border-width: 1px 1px 0 1px;
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
}
|
||||
}
|
||||
.offcanvas {
|
||||
display: none;
|
||||
}
|
||||
.offcanvas.in {
|
||||
display: block;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.offcanvas-xs {
|
||||
display: none;
|
||||
}
|
||||
.offcanvas-xs.in {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@media (max-width: 991px) {
|
||||
.offcanvas-sm {
|
||||
display: none;
|
||||
}
|
||||
.offcanvas-sm.in {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1199px) {
|
||||
.offcanvas-md {
|
||||
display: none;
|
||||
}
|
||||
.offcanvas-md.in {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.offcanvas-lg {
|
||||
display: none;
|
||||
}
|
||||
.offcanvas-lg.in {
|
||||
display: block;
|
||||
}
|
||||
.canvas-sliding {
|
||||
-webkit-transition: top .35s, left .35s, bottom .35s, right .35s;
|
||||
transition: top .35s, left .35s, bottom .35s, right .35s;
|
||||
}
|
||||
.offcanvas-clone {
|
||||
position: absolute !important;
|
||||
top: auto !important;
|
||||
right: 0 !important;
|
||||
bottom: 0 !important;
|
||||
left: auto !important;
|
||||
width: 0 !important;
|
||||
height: 0 !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
overflow: hidden !important;
|
||||
border: none !important;
|
||||
opacity: 0 !important;
|
||||
}
|
||||
.table.rowlink td:not(.rowlink-skip),
|
||||
.table .rowlink td:not(.rowlink-skip) {
|
||||
cursor: pointer;
|
||||
}
|
||||
.table.rowlink td:not(.rowlink-skip) a,
|
||||
.table .rowlink td:not(.rowlink-skip) a {
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
.table-hover.rowlink tr:hover td,
|
||||
.table-hover .rowlink tr:hover td {
|
||||
background-color: #cfcfcf;
|
||||
}
|
||||
.btn-file {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.btn-file > input {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
font-size: 23px;
|
||||
cursor: pointer;
|
||||
filter: alpha(opacity=0);
|
||||
opacity: 0;
|
||||
|
||||
direction: ltr;
|
||||
}
|
||||
.fileinput {
|
||||
display: inline-block;
|
||||
margin-bottom: 9px;
|
||||
}
|
||||
.fileinput .form-control {
|
||||
display: inline-block;
|
||||
padding-top: 7px;
|
||||
padding-bottom: 5px;
|
||||
margin-bottom: 0;
|
||||
vertical-align: middle;
|
||||
cursor: text;
|
||||
}
|
||||
.fileinput .thumbnail {
|
||||
display: inline-block;
|
||||
margin-bottom: 5px;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.fileinput .thumbnail > img {
|
||||
max-height: 100%;
|
||||
}
|
||||
.fileinput .btn {
|
||||
vertical-align: middle;
|
||||
}
|
||||
.fileinput-exists .fileinput-new,
|
||||
.fileinput-new .fileinput-exists {
|
||||
display: none;
|
||||
}
|
||||
.fileinput-inline .fileinput-controls {
|
||||
display: inline;
|
||||
}
|
||||
.fileinput-filename {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.form-control .fileinput-filename {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
.fileinput.input-group {
|
||||
display: table;
|
||||
}
|
||||
.fileinput.input-group > * {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
.fileinput.input-group > .btn-file {
|
||||
z-index: 1;
|
||||
}
|
||||
.fileinput-new.input-group .btn-file,
|
||||
.fileinput-new .input-group .btn-file {
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
.fileinput-new.input-group .btn-file.btn-xs,
|
||||
.fileinput-new .input-group .btn-file.btn-xs,
|
||||
.fileinput-new.input-group .btn-file.btn-sm,
|
||||
.fileinput-new .input-group .btn-file.btn-sm {
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
.fileinput-new.input-group .btn-file.btn-lg,
|
||||
.fileinput-new .input-group .btn-file.btn-lg {
|
||||
border-radius: 0 6px 6px 0;
|
||||
}
|
||||
.form-group.has-warning .fileinput .fileinput-preview {
|
||||
color: #8a6d3b;
|
||||
}
|
||||
.form-group.has-warning .fileinput .thumbnail {
|
||||
border-color: #faebcc;
|
||||
}
|
||||
.form-group.has-error .fileinput .fileinput-preview {
|
||||
color: #a94442;
|
||||
}
|
||||
.form-group.has-error .fileinput .thumbnail {
|
||||
border-color: #ebccd1;
|
||||
}
|
||||
.form-group.has-success .fileinput .fileinput-preview {
|
||||
color: #3c763d;
|
||||
}
|
||||
.form-group.has-success .fileinput .thumbnail {
|
||||
border-color: #d6e9c6;
|
||||
}
|
||||
.input-group-addon:not(:first-child) {
|
||||
border-left: 0;
|
||||
}
|
||||
/*# sourceMappingURL=jasny-bootstrap.css.map */
|
||||
File diff suppressed because it is too large
Load Diff
7
ruoyi-admin/src/main/resources/static/ajax/libs/jasny/jasny-bootstrap.min.css
vendored
Normal file
7
ruoyi-admin/src/main/resources/static/ajax/libs/jasny/jasny-bootstrap.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,381 @@
|
|||
/*
|
||||
Common
|
||||
*/
|
||||
|
||||
.wizard,
|
||||
.tabcontrol
|
||||
{
|
||||
display: block;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.wizard a,
|
||||
.tabcontrol a
|
||||
{
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.wizard ul,
|
||||
.tabcontrol ul
|
||||
{
|
||||
list-style: none !important;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.wizard ul > li,
|
||||
.tabcontrol ul > li
|
||||
{
|
||||
display: block;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Accessibility */
|
||||
.wizard > .steps .current-info,
|
||||
.tabcontrol > .steps .current-info
|
||||
{
|
||||
position: absolute;
|
||||
left: -999em;
|
||||
}
|
||||
|
||||
.wizard > .content > .title,
|
||||
.tabcontrol > .content > .title
|
||||
{
|
||||
position: absolute;
|
||||
left: -999em;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*
|
||||
Wizard
|
||||
*/
|
||||
|
||||
.wizard > .steps
|
||||
{
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wizard.vertical > .steps
|
||||
{
|
||||
display: inline;
|
||||
float: left;
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.wizard > .steps > ul > li
|
||||
{
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.wizard > .steps > ul > li,
|
||||
.wizard > .actions > ul > li
|
||||
{
|
||||
float: left;
|
||||
}
|
||||
|
||||
.wizard.vertical > .steps > ul > li
|
||||
{
|
||||
float: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wizard > .steps a,
|
||||
.wizard > .steps a:hover,
|
||||
.wizard > .steps a:active
|
||||
{
|
||||
display: block;
|
||||
width: auto;
|
||||
margin: 0 0.5em 0.5em;
|
||||
padding: 8px;
|
||||
text-decoration: none;
|
||||
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.wizard > .steps .disabled a,
|
||||
.wizard > .steps .disabled a:hover,
|
||||
.wizard > .steps .disabled a:active
|
||||
{
|
||||
background: #eee;
|
||||
color: #aaa;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.wizard > .steps .current a,
|
||||
.wizard > .steps .current a:hover,
|
||||
.wizard > .steps .current a:active
|
||||
{
|
||||
background: #1AB394;
|
||||
color: #fff;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.wizard > .steps .done a,
|
||||
.wizard > .steps .done a:hover,
|
||||
.wizard > .steps .done a:active
|
||||
{
|
||||
background: #6fd1bd;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.wizard > .steps .error a,
|
||||
.wizard > .steps .error a:hover,
|
||||
.wizard > .steps .error a:active
|
||||
{
|
||||
background: #ED5565 ;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.wizard > .content
|
||||
{
|
||||
background: #eee;
|
||||
display: block;
|
||||
margin: 5px 5px 10px 5px;
|
||||
min-height: 120px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
width: auto;
|
||||
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.wizard-big.wizard > .content {
|
||||
min-height: 320px;
|
||||
}
|
||||
.wizard.vertical > .content
|
||||
{
|
||||
display: inline;
|
||||
float: left;
|
||||
margin: 0 2.5% 0.5em 2.5%;
|
||||
width: 65%;
|
||||
}
|
||||
|
||||
.wizard > .content > .body
|
||||
{
|
||||
float: left;
|
||||
position: absolute;
|
||||
width: 95%;
|
||||
height: 95%;
|
||||
padding: 2.5%;
|
||||
}
|
||||
|
||||
.wizard > .content > .body ul
|
||||
{
|
||||
list-style: disc !important;
|
||||
}
|
||||
|
||||
.wizard > .content > .body ul > li
|
||||
{
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
.wizard > .content > .body > iframe
|
||||
{
|
||||
border: 0 none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.wizard > .content > .body input
|
||||
{
|
||||
display: block;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.wizard > .content > .body input[type="checkbox"]
|
||||
{
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.wizard > .content > .body input.error
|
||||
{
|
||||
background: rgb(251, 227, 228);
|
||||
border: 1px solid #fbc2c4;
|
||||
color: #8a1f11;
|
||||
}
|
||||
|
||||
.wizard > .content > .body label
|
||||
{
|
||||
display: inline-block;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.wizard > .content > .body label.error
|
||||
{
|
||||
color: #8a1f11;
|
||||
display: inline-block;
|
||||
margin-left: 1.5em;
|
||||
}
|
||||
|
||||
.wizard > .actions
|
||||
{
|
||||
position: relative;
|
||||
display: block;
|
||||
text-align: right;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wizard.vertical > .actions
|
||||
{
|
||||
display: inline;
|
||||
float: right;
|
||||
margin: 0 2.5%;
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
.wizard > .actions > ul
|
||||
{
|
||||
display: inline-block;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.wizard > .actions > ul > li
|
||||
{
|
||||
margin: 0 0.5em;
|
||||
}
|
||||
|
||||
.wizard.vertical > .actions > ul > li
|
||||
{
|
||||
margin: 0 0 0 1em;
|
||||
}
|
||||
|
||||
.wizard > .actions a,
|
||||
.wizard > .actions a:hover,
|
||||
.wizard > .actions a:active
|
||||
{
|
||||
background: #1AB394;
|
||||
color: #fff;
|
||||
display: block;
|
||||
padding: 0.5em 1em;
|
||||
text-decoration: none;
|
||||
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.wizard > .actions .disabled a,
|
||||
.wizard > .actions .disabled a:hover,
|
||||
.wizard > .actions .disabled a:active
|
||||
{
|
||||
background: #eee;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.wizard > .loading
|
||||
{
|
||||
}
|
||||
|
||||
.wizard > .loading .spinner
|
||||
{
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*
|
||||
Tabcontrol
|
||||
*/
|
||||
|
||||
.tabcontrol > .steps
|
||||
{
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tabcontrol > .steps > ul
|
||||
{
|
||||
position: relative;
|
||||
margin: 6px 0 0 0;
|
||||
top: 1px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.tabcontrol > .steps > ul > li
|
||||
{
|
||||
float: left;
|
||||
margin: 5px 2px 0 0;
|
||||
padding: 1px;
|
||||
|
||||
-webkit-border-top-left-radius: 5px;
|
||||
-webkit-border-top-right-radius: 5px;
|
||||
-moz-border-radius-topleft: 5px;
|
||||
-moz-border-radius-topright: 5px;
|
||||
border-top-left-radius: 5px;
|
||||
border-top-right-radius: 5px;
|
||||
}
|
||||
|
||||
.tabcontrol > .steps > ul > li:hover
|
||||
{
|
||||
background: #edecec;
|
||||
border: 1px solid #bbb;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.tabcontrol > .steps > ul > li.current
|
||||
{
|
||||
background: #fff;
|
||||
border: 1px solid #bbb;
|
||||
border-bottom: 0 none;
|
||||
padding: 0 0 1px 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.tabcontrol > .steps > ul > li > a
|
||||
{
|
||||
color: #5f5f5f;
|
||||
display: inline-block;
|
||||
border: 0 none;
|
||||
margin: 0;
|
||||
padding: 10px 30px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.tabcontrol > .steps > ul > li > a:hover
|
||||
{
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.tabcontrol > .steps > ul > li.current > a
|
||||
{
|
||||
padding: 15px 30px 10px 30px;
|
||||
}
|
||||
|
||||
.tabcontrol > .content
|
||||
{
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 35em;
|
||||
overflow: hidden;
|
||||
border-top: 1px solid #bbb;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.tabcontrol > .content > .body
|
||||
{
|
||||
float: left;
|
||||
position: absolute;
|
||||
width: 95%;
|
||||
height: 95%;
|
||||
padding: 2.5%;
|
||||
}
|
||||
|
||||
.tabcontrol > .content > .body ul
|
||||
{
|
||||
list-style: disc !important;
|
||||
}
|
||||
|
||||
.tabcontrol > .content > .body ul > li
|
||||
{
|
||||
display: list-item;
|
||||
}
|
||||
label.error { position:inherit; }
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
1042
ruoyi-admin/src/main/resources/static/ajax/libs/suggest/bootstrap-suggest.js
vendored
Normal file
1042
ruoyi-admin/src/main/resources/static/ajax/libs/suggest/bootstrap-suggest.js
vendored
Normal file
File diff suppressed because it is too large
Load Diff
10
ruoyi-admin/src/main/resources/static/ajax/libs/suggest/bootstrap-suggest.min.js
vendored
Normal file
10
ruoyi-admin/src/main/resources/static/ajax/libs/suggest/bootstrap-suggest.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
774
ruoyi-admin/src/main/resources/static/ajax/libs/typeahead/bootstrap3-typeahead.js
vendored
Normal file
774
ruoyi-admin/src/main/resources/static/ajax/libs/typeahead/bootstrap3-typeahead.js
vendored
Normal file
|
|
@ -0,0 +1,774 @@
|
|||
/* =============================================================
|
||||
* bootstrap3-typeahead.js v4.0.2
|
||||
* https://github.com/bassjobsen/Bootstrap-3-Typeahead
|
||||
* =============================================================
|
||||
* Original written by @mdo and @fat
|
||||
* =============================================================
|
||||
* Copyright 2014 Bass Jobsen @bassjobsen
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the 'License');
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an 'AS IS' BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
* ============================================================ */
|
||||
|
||||
|
||||
(function (root, factory) {
|
||||
|
||||
'use strict';
|
||||
|
||||
// CommonJS module is defined
|
||||
if (typeof module !== 'undefined' && module.exports) {
|
||||
module.exports = factory(require('jquery'));
|
||||
}
|
||||
// AMD module is defined
|
||||
else if (typeof define === 'function' && define.amd) {
|
||||
define(['jquery'], function ($) {
|
||||
return factory($);
|
||||
});
|
||||
} else {
|
||||
factory(root.jQuery);
|
||||
}
|
||||
|
||||
}(this, function ($) {
|
||||
|
||||
'use strict';
|
||||
// jshint laxcomma: true
|
||||
|
||||
|
||||
/* TYPEAHEAD PUBLIC CLASS DEFINITION
|
||||
* ================================= */
|
||||
|
||||
var Typeahead = function (element, options) {
|
||||
this.$element = $(element);
|
||||
this.options = $.extend({}, Typeahead.defaults, options);
|
||||
this.matcher = this.options.matcher || this.matcher;
|
||||
this.sorter = this.options.sorter || this.sorter;
|
||||
this.select = this.options.select || this.select;
|
||||
this.autoSelect = typeof this.options.autoSelect == 'boolean' ? this.options.autoSelect : true;
|
||||
this.highlighter = this.options.highlighter || this.highlighter;
|
||||
this.render = this.options.render || this.render;
|
||||
this.updater = this.options.updater || this.updater;
|
||||
this.displayText = this.options.displayText || this.displayText;
|
||||
this.itemLink = this.options.itemLink || this.itemLink;
|
||||
this.itemTitle = this.options.itemTitle || this.itemTitle;
|
||||
this.followLinkOnSelect = this.options.followLinkOnSelect || this.followLinkOnSelect;
|
||||
this.source = this.options.source;
|
||||
this.delay = this.options.delay;
|
||||
this.theme = this.options.theme && this.options.themes && this.options.themes[this.options.theme] || Typeahead.defaults.themes[Typeahead.defaults.theme];
|
||||
this.$menu = $(this.options.menu || this.theme.menu);
|
||||
this.$appendTo = this.options.appendTo ? $(this.options.appendTo) : null;
|
||||
this.fitToElement = typeof this.options.fitToElement == 'boolean' ? this.options.fitToElement : false;
|
||||
this.shown = false;
|
||||
this.listen();
|
||||
this.showHintOnFocus = typeof this.options.showHintOnFocus == 'boolean' || this.options.showHintOnFocus === 'all' ? this.options.showHintOnFocus : false;
|
||||
this.afterSelect = this.options.afterSelect;
|
||||
this.afterEmptySelect = this.options.afterEmptySelect;
|
||||
this.addItem = false;
|
||||
this.value = this.$element.val() || this.$element.text();
|
||||
this.keyPressed = false;
|
||||
this.focused = this.$element.is(':focus');
|
||||
this.changeInputOnSelect = this.options.changeInputOnSelect || this.changeInputOnSelect;
|
||||
this.changeInputOnMove = this.options.changeInputOnMove || this.changeInputOnMove;
|
||||
this.openLinkInNewTab = this.options.openLinkInNewTab || this.openLinkInNewTab;
|
||||
this.selectOnBlur = this.options.selectOnBlur || this.selectOnBlur;
|
||||
this.showCategoryHeader = this.options.showCategoryHeader || this.showCategoryHeader;
|
||||
};
|
||||
|
||||
Typeahead.prototype = {
|
||||
|
||||
constructor: Typeahead,
|
||||
|
||||
|
||||
setDefault: function (val) {
|
||||
// var val = this.$menu.find('.active').data('value');
|
||||
this.$element.data('active', val);
|
||||
if (this.autoSelect || val) {
|
||||
var newVal = this.updater(val);
|
||||
// Updater can be set to any random functions via "options" parameter in constructor above.
|
||||
// Add null check for cases when updater returns void or undefined.
|
||||
if (!newVal) {
|
||||
newVal = '';
|
||||
}
|
||||
this.$element
|
||||
.val(this.displayText(newVal) || newVal)
|
||||
.text(this.displayText(newVal) || newVal)
|
||||
.change();
|
||||
this.afterSelect(newVal);
|
||||
}
|
||||
return this.hide();
|
||||
},
|
||||
|
||||
select: function () {
|
||||
var val = this.$menu.find('.active').data('value');
|
||||
|
||||
this.$element.data('active', val);
|
||||
if (this.autoSelect || val) {
|
||||
var newVal = this.updater(val);
|
||||
// Updater can be set to any random functions via "options" parameter in constructor above.
|
||||
// Add null check for cases when updater returns void or undefined.
|
||||
if (!newVal) {
|
||||
newVal = '';
|
||||
}
|
||||
|
||||
if (this.changeInputOnSelect) {
|
||||
this.$element
|
||||
.val(this.displayText(newVal) || newVal)
|
||||
.text(this.displayText(newVal) || newVal)
|
||||
.change();
|
||||
}
|
||||
|
||||
if (this.followLinkOnSelect && this.itemLink(val)) {
|
||||
if (this.openLinkInNewTab) {
|
||||
window.open(this.itemLink(val), '_blank');
|
||||
} else {
|
||||
document.location = this.itemLink(val);
|
||||
}
|
||||
this.afterSelect(newVal);
|
||||
} else if (this.followLinkOnSelect && !this.itemLink(val)) {
|
||||
this.afterEmptySelect(newVal);
|
||||
} else {
|
||||
this.afterSelect(newVal);
|
||||
}
|
||||
} else {
|
||||
this.afterEmptySelect();
|
||||
}
|
||||
|
||||
return this.hide();
|
||||
},
|
||||
|
||||
updater: function (item) {
|
||||
return item;
|
||||
},
|
||||
|
||||
setSource: function (source) {
|
||||
this.source = source;
|
||||
},
|
||||
|
||||
show: function () {
|
||||
var pos = $.extend({}, this.$element.position(), {
|
||||
height: this.$element[0].offsetHeight
|
||||
});
|
||||
|
||||
var scrollHeight = typeof this.options.scrollHeight == 'function' ?
|
||||
this.options.scrollHeight.call() :
|
||||
this.options.scrollHeight;
|
||||
|
||||
var element;
|
||||
if (this.shown) {
|
||||
element = this.$menu;
|
||||
} else if (this.$appendTo) {
|
||||
element = this.$menu.appendTo(this.$appendTo);
|
||||
this.hasSameParent = this.$appendTo.is(this.$element.parent());
|
||||
} else {
|
||||
element = this.$menu.insertAfter(this.$element);
|
||||
this.hasSameParent = true;
|
||||
}
|
||||
|
||||
if (!this.hasSameParent) {
|
||||
// We cannot rely on the element position, need to position relative to the window
|
||||
element.css('position', 'fixed');
|
||||
var offset = this.$element.offset();
|
||||
pos.top = offset.top;
|
||||
pos.left = offset.left;
|
||||
}
|
||||
// The rules for bootstrap are: 'dropup' in the parent and 'dropdown-menu-right' in the element.
|
||||
// Note that to get right alignment, you'll need to specify `menu` in the options to be:
|
||||
// '<ul class="typeahead dropdown-menu" role="listbox"></ul>'
|
||||
var dropup = $(element).parent().hasClass('dropup');
|
||||
var newTop = dropup ? 'auto' : (pos.top + pos.height + scrollHeight);
|
||||
var right = $(element).hasClass('dropdown-menu-right');
|
||||
var newLeft = right ? 'auto' : pos.left;
|
||||
// it seems like setting the css is a bad idea (just let Bootstrap do it), but I'll keep the old
|
||||
// logic in place except for the dropup/right-align cases.
|
||||
element.css({ top: newTop, left: newLeft }).show();
|
||||
|
||||
if (this.options.fitToElement === true) {
|
||||
element.css('width', this.$element.outerWidth() + 'px');
|
||||
}
|
||||
|
||||
this.shown = true;
|
||||
return this;
|
||||
},
|
||||
|
||||
hide: function () {
|
||||
this.$menu.hide();
|
||||
this.shown = false;
|
||||
return this;
|
||||
},
|
||||
|
||||
lookup: function (query) {
|
||||
if (typeof(query) != 'undefined' && query !== null) {
|
||||
this.query = query;
|
||||
} else {
|
||||
this.query = this.$element.val();
|
||||
}
|
||||
|
||||
if (this.query.length < this.options.minLength && !this.options.showHintOnFocus) {
|
||||
return this.shown ? this.hide() : this;
|
||||
}
|
||||
|
||||
var worker = $.proxy(function () {
|
||||
|
||||
// Bloodhound (since 0.11) needs three arguments.
|
||||
// Two of them are callback functions (sync and async) for local and remote data processing
|
||||
// see https://github.com/twitter/typeahead.js/blob/master/src/bloodhound/bloodhound.js#L132
|
||||
if ($.isFunction(this.source) && this.source.length === 3) {
|
||||
this.source(this.query, $.proxy(this.process, this), $.proxy(this.process, this));
|
||||
} else if ($.isFunction(this.source)) {
|
||||
this.source(this.query, $.proxy(this.process, this));
|
||||
} else if (this.source) {
|
||||
this.process(this.source);
|
||||
}
|
||||
}, this);
|
||||
|
||||
clearTimeout(this.lookupWorker);
|
||||
this.lookupWorker = setTimeout(worker, this.delay);
|
||||
},
|
||||
|
||||
process: function (items) {
|
||||
var that = this;
|
||||
|
||||
items = $.grep(items, function (item) {
|
||||
return that.matcher(item);
|
||||
});
|
||||
|
||||
items = this.sorter(items);
|
||||
|
||||
if (!items.length && !this.options.addItem) {
|
||||
return this.shown ? this.hide() : this;
|
||||
}
|
||||
|
||||
if (items.length > 0) {
|
||||
this.$element.data('active', items[0]);
|
||||
} else {
|
||||
this.$element.data('active', null);
|
||||
}
|
||||
|
||||
if (this.options.items != 'all') {
|
||||
items = items.slice(0, this.options.items);
|
||||
}
|
||||
|
||||
// Add item
|
||||
if (this.options.addItem) {
|
||||
items.push(this.options.addItem);
|
||||
}
|
||||
|
||||
return this.render(items).show();
|
||||
},
|
||||
|
||||
matcher: function (item) {
|
||||
var it = this.displayText(item);
|
||||
return ~it.toLowerCase().indexOf(this.query.toLowerCase());
|
||||
},
|
||||
|
||||
sorter: function (items) {
|
||||
var beginswith = [];
|
||||
var caseSensitive = [];
|
||||
var caseInsensitive = [];
|
||||
var item;
|
||||
|
||||
while ((item = items.shift())) {
|
||||
var it = this.displayText(item);
|
||||
if (!it.toLowerCase().indexOf(this.query.toLowerCase())) {
|
||||
beginswith.push(item);
|
||||
} else if (~it.indexOf(this.query)) {
|
||||
caseSensitive.push(item);
|
||||
} else {
|
||||
caseInsensitive.push(item);
|
||||
}
|
||||
}
|
||||
|
||||
return beginswith.concat(caseSensitive, caseInsensitive);
|
||||
},
|
||||
|
||||
highlighter: function (item) {
|
||||
var text = this.query;
|
||||
if (text === '') {
|
||||
return item;
|
||||
}
|
||||
var matches = item.match(/(>)([^<]*)(<)/g);
|
||||
var first = [];
|
||||
var second = [];
|
||||
var i;
|
||||
if (matches && matches.length) {
|
||||
// html
|
||||
for (i = 0; i < matches.length; ++i) {
|
||||
if (matches[i].length > 2) {// escape '><'
|
||||
first.push(matches[i]);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// text
|
||||
first = [];
|
||||
first.push(item);
|
||||
}
|
||||
text = text.replace((/[\(\)\/\.\*\+\?\[\]]/g), function (mat) {
|
||||
return '\\' + mat;
|
||||
});
|
||||
var reg = new RegExp(text, 'g');
|
||||
var m;
|
||||
for (i = 0; i < first.length; ++i) {
|
||||
m = first[i].match(reg);
|
||||
if (m && m.length > 0) {// find all text nodes matches
|
||||
second.push(first[i]);
|
||||
}
|
||||
}
|
||||
for (i = 0; i < second.length; ++i) {
|
||||
item = item.replace(second[i], second[i].replace(reg, '<strong>$&</strong>'));
|
||||
}
|
||||
return item;
|
||||
},
|
||||
|
||||
render: function (items) {
|
||||
var that = this;
|
||||
var self = this;
|
||||
var activeFound = false;
|
||||
var data = [];
|
||||
var _category = that.options.separator;
|
||||
|
||||
$.each(items, function (key, value) {
|
||||
// inject separator
|
||||
if (key > 0 && value[_category] !== items[key - 1][_category]) {
|
||||
data.push({
|
||||
__type: 'divider'
|
||||
});
|
||||
}
|
||||
|
||||
if (this.showCategoryHeader) {
|
||||
// inject category header
|
||||
if (value[_category] && (key === 0 || value[_category] !== items[key - 1][_category])) {
|
||||
data.push({
|
||||
__type: 'category',
|
||||
name: value[_category]
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
data.push(value);
|
||||
});
|
||||
|
||||
items = $(data).map(function (i, item) {
|
||||
if ((item.__type || false) == 'category'){
|
||||
return $(that.options.headerHtml || that.theme.headerHtml).text(item.name)[0];
|
||||
}
|
||||
|
||||
if ((item.__type || false) == 'divider'){
|
||||
return $(that.options.headerDivider || that.theme.headerDivider)[0];
|
||||
}
|
||||
|
||||
var text = self.displayText(item);
|
||||
i = $(that.options.item || that.theme.item).data('value', item);
|
||||
i.find(that.options.itemContentSelector || that.theme.itemContentSelector)
|
||||
.addBack(that.options.itemContentSelector || that.theme.itemContentSelector)
|
||||
.html(that.highlighter(text, item));
|
||||
if(that.options.followLinkOnSelect) {
|
||||
i.find('a').attr('href', self.itemLink(item));
|
||||
}
|
||||
i.find('a').attr('title', self.itemTitle(item));
|
||||
if (text == self.$element.val()) {
|
||||
i.addClass('active');
|
||||
self.$element.data('active', item);
|
||||
activeFound = true;
|
||||
}
|
||||
return i[0];
|
||||
});
|
||||
|
||||
if (this.autoSelect && !activeFound) {
|
||||
items.filter(':not(.dropdown-header)').first().addClass('active');
|
||||
this.$element.data('active', items.first().data('value'));
|
||||
}
|
||||
this.$menu.html(items);
|
||||
return this;
|
||||
},
|
||||
|
||||
displayText: function (item) {
|
||||
return typeof item !== 'undefined' && typeof item.name != 'undefined' ? item.name : item;
|
||||
},
|
||||
|
||||
itemLink: function (item) {
|
||||
return null;
|
||||
},
|
||||
|
||||
itemTitle: function (item) {
|
||||
return null;
|
||||
},
|
||||
|
||||
next: function (event) {
|
||||
var active = this.$menu.find('.active').removeClass('active');
|
||||
var next = active.next();
|
||||
|
||||
if (!next.length) {
|
||||
next = $(this.$menu.find($(this.options.item || this.theme.item).prop('tagName'))[0]);
|
||||
}
|
||||
|
||||
while (next.hasClass('divider') || next.hasClass('dropdown-header')) {
|
||||
next = next.next();
|
||||
}
|
||||
|
||||
next.addClass('active');
|
||||
// added for screen reader
|
||||
var newVal = this.updater(next.data('value'));
|
||||
if (this.changeInputOnMove) {
|
||||
this.$element.val(this.displayText(newVal) || newVal);
|
||||
}
|
||||
},
|
||||
|
||||
prev: function (event) {
|
||||
var active = this.$menu.find('.active').removeClass('active');
|
||||
var prev = active.prev();
|
||||
|
||||
if (!prev.length) {
|
||||
prev = this.$menu.find($(this.options.item || this.theme.item).prop('tagName')).last();
|
||||
}
|
||||
|
||||
while (prev.hasClass('divider') || prev.hasClass('dropdown-header')) {
|
||||
prev = prev.prev();
|
||||
}
|
||||
|
||||
prev.addClass('active');
|
||||
// added for screen reader
|
||||
var newVal = this.updater(prev.data('value'));
|
||||
if (this.changeInputOnMove) {
|
||||
this.$element.val(this.displayText(newVal) || newVal);
|
||||
}
|
||||
},
|
||||
|
||||
listen: function () {
|
||||
this.$element
|
||||
.on('focus.bootstrap3Typeahead', $.proxy(this.focus, this))
|
||||
.on('blur.bootstrap3Typeahead', $.proxy(this.blur, this))
|
||||
.on('keypress.bootstrap3Typeahead', $.proxy(this.keypress, this))
|
||||
.on('propertychange.bootstrap3Typeahead input.bootstrap3Typeahead', $.proxy(this.input, this))
|
||||
.on('keyup.bootstrap3Typeahead', $.proxy(this.keyup, this));
|
||||
|
||||
if (this.eventSupported('keydown')) {
|
||||
this.$element.on('keydown.bootstrap3Typeahead', $.proxy(this.keydown, this));
|
||||
}
|
||||
|
||||
var itemTagName = $(this.options.item || this.theme.item).prop('tagName');
|
||||
if ('ontouchstart' in document.documentElement && 'onmousemove' in document.documentElement) {
|
||||
this.$menu
|
||||
.on('touchstart', itemTagName, $.proxy(this.touchstart, this))
|
||||
.on('touchend', itemTagName, $.proxy(this.click, this))
|
||||
.on('click', $.proxy(this.click, this))
|
||||
.on('mouseenter', itemTagName, $.proxy(this.mouseenter, this))
|
||||
.on('mouseleave', itemTagName, $.proxy(this.mouseleave, this))
|
||||
.on('mousedown', $.proxy(this.mousedown,this));
|
||||
} else if ('ontouchstart' in document.documentElement) {
|
||||
this.$menu
|
||||
.on('touchstart', itemTagName, $.proxy(this.touchstart, this))
|
||||
.on('touchend', itemTagName, $.proxy(this.click, this));
|
||||
} else {
|
||||
this.$menu
|
||||
.on('click', $.proxy(this.click, this))
|
||||
.on('mouseenter', itemTagName, $.proxy(this.mouseenter, this))
|
||||
.on('mouseleave', itemTagName, $.proxy(this.mouseleave, this))
|
||||
.on('mousedown', $.proxy(this.mousedown, this));
|
||||
}
|
||||
},
|
||||
|
||||
destroy: function () {
|
||||
this.$element.data('typeahead', null);
|
||||
this.$element.data('active', null);
|
||||
this.$element
|
||||
.unbind('focus.bootstrap3Typeahead')
|
||||
.unbind('blur.bootstrap3Typeahead')
|
||||
.unbind('keypress.bootstrap3Typeahead')
|
||||
.unbind('propertychange.bootstrap3Typeahead input.bootstrap3Typeahead')
|
||||
.unbind('keyup.bootstrap3Typeahead');
|
||||
|
||||
if (this.eventSupported('keydown')) {
|
||||
this.$element.unbind('keydown.bootstrap3-typeahead');
|
||||
}
|
||||
|
||||
this.$menu.remove();
|
||||
this.destroyed = true;
|
||||
},
|
||||
|
||||
eventSupported: function (eventName) {
|
||||
var isSupported = eventName in this.$element;
|
||||
if (!isSupported) {
|
||||
this.$element.setAttribute(eventName, 'return;');
|
||||
isSupported = typeof this.$element[eventName] === 'function';
|
||||
}
|
||||
return isSupported;
|
||||
},
|
||||
|
||||
move: function (e) {
|
||||
if (!this.shown) {
|
||||
return;
|
||||
}
|
||||
|
||||
switch (e.keyCode) {
|
||||
case 9: // tab
|
||||
case 13: // enter
|
||||
case 27: // escape
|
||||
e.preventDefault();
|
||||
break;
|
||||
|
||||
case 38: // up arrow
|
||||
// with the shiftKey (this is actually the left parenthesis)
|
||||
if (e.shiftKey) {
|
||||
return;
|
||||
}
|
||||
e.preventDefault();
|
||||
this.prev();
|
||||
break;
|
||||
|
||||
case 40: // down arrow
|
||||
// with the shiftKey (this is actually the right parenthesis)
|
||||
if (e.shiftKey) {
|
||||
return;
|
||||
}
|
||||
e.preventDefault();
|
||||
this.next();
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
||||
keydown: function (e) {
|
||||
/**
|
||||
* Prevent to make an ajax call while copying and pasting.
|
||||
*
|
||||
* @author Simone Sacchi
|
||||
* @version 2018/01/18
|
||||
*/
|
||||
if (e.keyCode === 17) { // ctrl
|
||||
return;
|
||||
}
|
||||
this.keyPressed = true;
|
||||
this.suppressKeyPressRepeat = ~$.inArray(e.keyCode, [40, 38, 9, 13, 27]);
|
||||
if (!this.shown && e.keyCode == 40) {
|
||||
this.lookup();
|
||||
} else {
|
||||
this.move(e);
|
||||
}
|
||||
},
|
||||
|
||||
keypress: function (e) {
|
||||
if (this.suppressKeyPressRepeat) {
|
||||
return;
|
||||
}
|
||||
this.move(e);
|
||||
},
|
||||
|
||||
input: function (e) {
|
||||
// This is a fixed for IE10/11 that fires the input event when a placehoder is changed
|
||||
// (https://connect.microsoft.com/IE/feedback/details/810538/ie-11-fires-input-event-on-focus)
|
||||
var currentValue = this.$element.val() || this.$element.text();
|
||||
if (this.value !== currentValue) {
|
||||
this.value = currentValue;
|
||||
this.lookup();
|
||||
}
|
||||
},
|
||||
|
||||
keyup: function (e) {
|
||||
if (this.destroyed) {
|
||||
return;
|
||||
}
|
||||
switch (e.keyCode) {
|
||||
case 40: // down arrow
|
||||
case 38: // up arrow
|
||||
case 16: // shift
|
||||
case 17: // ctrl
|
||||
case 18: // alt
|
||||
break;
|
||||
|
||||
case 9: // tab
|
||||
if (!this.shown || (this.showHintOnFocus && !this.keyPressed)) {
|
||||
return;
|
||||
}
|
||||
this.select();
|
||||
break;
|
||||
case 13: // enter
|
||||
if (!this.shown) {
|
||||
return;
|
||||
}
|
||||
this.select();
|
||||
break;
|
||||
|
||||
case 27: // escape
|
||||
if (!this.shown) {
|
||||
return;
|
||||
}
|
||||
this.hide();
|
||||
break;
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
focus: function (e) {
|
||||
if (!this.focused) {
|
||||
this.focused = true;
|
||||
this.keyPressed = false;
|
||||
if (this.options.showHintOnFocus && this.skipShowHintOnFocus !== true) {
|
||||
if (this.options.showHintOnFocus === 'all') {
|
||||
this.lookup('');
|
||||
} else {
|
||||
this.lookup();
|
||||
}
|
||||
}
|
||||
}
|
||||
if (this.skipShowHintOnFocus) {
|
||||
this.skipShowHintOnFocus = false;
|
||||
}
|
||||
},
|
||||
|
||||
blur: function (e) {
|
||||
if (!this.mousedover && !this.mouseddown && this.shown) {
|
||||
if (this.selectOnBlur) {
|
||||
this.select();
|
||||
}
|
||||
this.hide();
|
||||
this.focused = false;
|
||||
this.keyPressed = false;
|
||||
} else if (this.mouseddown) {
|
||||
// This is for IE that blurs the input when user clicks on scroll.
|
||||
// We set the focus back on the input and prevent the lookup to occur again
|
||||
this.skipShowHintOnFocus = true;
|
||||
this.$element.focus();
|
||||
this.mouseddown = false;
|
||||
}
|
||||
},
|
||||
|
||||
click: function (e) {
|
||||
e.preventDefault();
|
||||
this.skipShowHintOnFocus = true;
|
||||
this.select();
|
||||
this.$element.focus();
|
||||
this.hide();
|
||||
},
|
||||
|
||||
mouseenter: function (e) {
|
||||
this.mousedover = true;
|
||||
this.$menu.find('.active').removeClass('active');
|
||||
$(e.currentTarget).addClass('active');
|
||||
},
|
||||
|
||||
mouseleave: function (e) {
|
||||
this.mousedover = false;
|
||||
if (!this.focused && this.shown) {
|
||||
this.hide();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* We track the mousedown for IE. When clicking on the menu scrollbar, IE makes the input blur thus hiding the menu.
|
||||
*/
|
||||
mousedown: function (e) {
|
||||
this.mouseddown = true;
|
||||
this.$menu.one('mouseup', function (e) {
|
||||
// IE won't fire this, but FF and Chrome will so we reset our flag for them here
|
||||
this.mouseddown = false;
|
||||
}.bind(this));
|
||||
},
|
||||
|
||||
touchstart: function (e) {
|
||||
e.preventDefault();
|
||||
this.$menu.find('.active').removeClass('active');
|
||||
$(e.currentTarget).addClass('active');
|
||||
},
|
||||
|
||||
touchend: function (e) {
|
||||
e.preventDefault();
|
||||
this.select();
|
||||
this.$element.focus();
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
/* TYPEAHEAD PLUGIN DEFINITION
|
||||
* =========================== */
|
||||
|
||||
var old = $.fn.typeahead;
|
||||
|
||||
$.fn.typeahead = function (option) {
|
||||
var arg = arguments;
|
||||
if (typeof option == 'string' && option == 'getActive') {
|
||||
return this.data('active');
|
||||
}
|
||||
return this.each(function () {
|
||||
var $this = $(this);
|
||||
var data = $this.data('typeahead');
|
||||
var options = typeof option == 'object' && option;
|
||||
if (!data) {
|
||||
$this.data('typeahead', (data = new Typeahead(this, options)));
|
||||
}
|
||||
if (typeof option == 'string' && data[option]) {
|
||||
if (arg.length > 1) {
|
||||
data[option].apply(data, Array.prototype.slice.call(arg, 1));
|
||||
} else {
|
||||
data[option]();
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
Typeahead.defaults = {
|
||||
source: [],
|
||||
items: 8,
|
||||
minLength: 1,
|
||||
scrollHeight: 0,
|
||||
autoSelect: true,
|
||||
afterSelect: $.noop,
|
||||
afterEmptySelect: $.noop,
|
||||
addItem: false,
|
||||
followLinkOnSelect: false,
|
||||
delay: 0,
|
||||
separator: 'category',
|
||||
changeInputOnSelect: true,
|
||||
changeInputOnMove: true,
|
||||
openLinkInNewTab: false,
|
||||
selectOnBlur: true,
|
||||
showCategoryHeader: true,
|
||||
theme: "bootstrap3",
|
||||
themes: {
|
||||
bootstrap3: {
|
||||
menu: '<ul class="typeahead dropdown-menu" role="listbox"></ul>',
|
||||
item: '<li><a class="dropdown-item" href="#" role="option"></a></li>',
|
||||
itemContentSelector: "a",
|
||||
headerHtml: '<li class="dropdown-header"></li>',
|
||||
headerDivider: '<li class="divider" role="separator"></li>'
|
||||
},
|
||||
bootstrap4: {
|
||||
menu: '<div class="typeahead dropdown-menu" role="listbox"></div>',
|
||||
item: '<button class="dropdown-item" role="option"></button>',
|
||||
itemContentSelector: '.dropdown-item',
|
||||
headerHtml: '<h6 class="dropdown-header"></h6>',
|
||||
headerDivider: '<div class="dropdown-divider"></div>'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
$.fn.typeahead.Constructor = Typeahead;
|
||||
|
||||
/* TYPEAHEAD NO CONFLICT
|
||||
* =================== */
|
||||
|
||||
$.fn.typeahead.noConflict = function () {
|
||||
$.fn.typeahead = old;
|
||||
return this;
|
||||
};
|
||||
|
||||
|
||||
/* TYPEAHEAD DATA-API
|
||||
* ================== */
|
||||
|
||||
$(document).on('focus.typeahead.data-api', '[data-provide="typeahead"]', function (e) {
|
||||
var $this = $(this);
|
||||
if ($this.data('typeahead')) {
|
||||
return;
|
||||
}
|
||||
$this.typeahead($this.data());
|
||||
});
|
||||
|
||||
}));
|
||||
1
ruoyi-admin/src/main/resources/static/ajax/libs/typeahead/bootstrap3-typeahead.min.js
vendored
Normal file
1
ruoyi-admin/src/main/resources/static/ajax/libs/typeahead/bootstrap3-typeahead.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,322 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<th:block th:include="include :: header('搜索自动补全')" />
|
||||
</head>
|
||||
<body class="gray-bg">
|
||||
<div class="wrapper wrapper-content animated fadeInRight">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>搜索自动补全<small>https://github.com/lzwme/bootstrap-suggest-plugin</small></h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<p>展示下拉菜单按钮。</p>
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" id="suggest-demo-1">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>不展示下拉菜单按钮。</p>
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" id="suggest-demo-2">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>前端json中获取数据</p>
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" id="suggest-demo-3">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
||||
</ul>
|
||||
</div>
|
||||
<!-- /btn-group -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>百度搜索</h3>
|
||||
<p>支持逗号分隔多关键字</p>
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="input-group" style="width: 300px;">
|
||||
<input type="text" class="form-control" id="baidu">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
||||
</ul>
|
||||
</div>
|
||||
<!-- /btn-group -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>淘宝搜索</h3>
|
||||
<p>支持逗号分隔多关键字</p>
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="input-group" style="width: 400px;">
|
||||
<input type="text" class="form-control" id="taobao">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
||||
</ul>
|
||||
</div>
|
||||
<!-- /btn-group -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">相关参数详细信息</label>
|
||||
<div><a href="http://doc.ruoyi.vip/#/standard/zjwd?id=bootstrap-suggest" target="_blank">http://doc.ruoyi.vip/#/standard/zjwd?id=bootstrap-suggest</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-6">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>搜索自动补全<small>https://github.com/bassjobsen/Bootstrap-3-Typeahead</small></h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<p>通过数据属性的基本示例。</p>
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<input type="text" placeholder="ruoyi..." data-provide="typeahead" data-source='["ruoyi 1","ruoyi 2","ruoyi 3"]' class="form-control" />
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
|
||||
<p>通过javascript的基本示例。</p>
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<input type="text" placeholder="ruoyi..." class="form-control" id="typeahead-demo-1"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
<p>通过javascript的复杂示例。</p>
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<input type="text" placeholder="ruoyi..." class="form-control" id="typeahead-demo-2"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
<p>后台url中获取简单数据</p>
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<input type="text" placeholder="ruoyi..." class="form-control" id="typeahead-demo-3"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">相关参数详细信息</label>
|
||||
<div><a href="http://doc.ruoyi.vip/#/standard/zjwd?id=bootstrap-typeahead" target="_blank">http://doc.ruoyi.vip/#/standard/zjwd?id=bootstrap-typeahead</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<th:block th:include="include :: footer" />
|
||||
<th:block th:include="include :: bootstrap-suggest-js" />
|
||||
<th:block th:include="include :: bootstrap-typeahead-js" />
|
||||
<script type="text/javascript">
|
||||
|
||||
var testBsSuggest = $("#suggest-demo-1").bsSuggest({
|
||||
url: ctx + "demo/form/userModel",
|
||||
idField: "userId",
|
||||
keyField: "userName"
|
||||
}).on('onDataRequestSuccess', function (e, result) {
|
||||
console.log('onDataRequestSuccess: ', result);
|
||||
}).on('onSetSelectValue', function (e, keyword) {
|
||||
console.log('onSetSelectValue: ', keyword);
|
||||
}).on('onUnsetSelectValue', function (e) {
|
||||
console.log("onUnsetSelectValue");
|
||||
});
|
||||
|
||||
var testBsSuggest = $("#suggest-demo-2").bsSuggest({
|
||||
url: ctx + "demo/form/userModel",
|
||||
showBtn: false,
|
||||
idField: "userId",
|
||||
keyField: "userName"
|
||||
}).on('onDataRequestSuccess', function (e, result) {
|
||||
console.log('onDataRequestSuccess: ', result);
|
||||
}).on('onSetSelectValue', function (e, keyword) {
|
||||
console.log('onSetSelectValue: ', keyword);
|
||||
}).on('onUnsetSelectValue', function (e) {
|
||||
console.log("onUnsetSelectValue");
|
||||
});
|
||||
|
||||
//data 数据中获取
|
||||
var testdataBsSuggest = $("#suggest-demo-3").bsSuggest({
|
||||
indexId: 1,
|
||||
indexKey: 2,
|
||||
data: {
|
||||
'value': [
|
||||
{
|
||||
'userId': '1',
|
||||
'userCode': '1000001',
|
||||
'userName': '测试1',
|
||||
'userPhone': '15888888888'
|
||||
},
|
||||
{
|
||||
'userId': '2',
|
||||
'userCode': '1000002',
|
||||
'userName': '测试2',
|
||||
'userPhone': '15888888888'
|
||||
},
|
||||
{
|
||||
'userId': '3',
|
||||
'userCode': '1000003',
|
||||
'userName': '测试3',
|
||||
'userPhone': '15888888888'
|
||||
},
|
||||
{
|
||||
'userId': '4',
|
||||
'userCode': '1000004',
|
||||
'userName': '测试4',
|
||||
'userPhone': '15888888888'
|
||||
},
|
||||
{
|
||||
'userId': '5',
|
||||
'userCode': '1000005',
|
||||
'userName': '测试5',
|
||||
'userPhone': '15888888888'
|
||||
}
|
||||
],
|
||||
'defaults': 'http://ruoyi.vip'
|
||||
}
|
||||
});
|
||||
|
||||
//百度搜索测试
|
||||
var baiduBsSuggest = $("#baidu").bsSuggest({
|
||||
allowNoKeyword: false, //是否允许无关键字时请求数据
|
||||
multiWord: true, //以分隔符号分割的多关键字支持
|
||||
separator: ",", //多关键字支持时的分隔符，默认为空格
|
||||
getDataMethod: "url", //获取数据的方式，总是从 URL 获取
|
||||
url: 'http://unionsug.baidu.com/su?p=3&t=' + (new Date()).getTime() + '&wd=',
|
||||
/*优先从url ajax 请求 json 帮助数据，注意最后一个参数为关键字请求参数*/
|
||||
jsonp: 'cb',
|
||||
/*如果从 url 获取数据，并且需要跨域，则该参数必须设置*/
|
||||
processData: function (json) { // url 获取数据时，对数据的处理，作为 getData 的回调函数
|
||||
var i, len, data = {
|
||||
value: []
|
||||
};
|
||||
if (!json || !json.s || json.s.length === 0) {
|
||||
return false;
|
||||
}
|
||||
|
||||
console.log(json);
|
||||
len = json.s.length;
|
||||
|
||||
jsonStr = "{'value':[";
|
||||
for (i = 0; i < len; i++) {
|
||||
data.value.push({
|
||||
word: json.s[i]
|
||||
});
|
||||
}
|
||||
data.defaults = 'baidu';
|
||||
|
||||
//字符串转化为 js 对象
|
||||
return data;
|
||||
}
|
||||
});
|
||||
|
||||
//淘宝搜索建议测试
|
||||
var taobaoBsSuggest = $("#taobao").bsSuggest({
|
||||
indexId: 2, //data.value 的第几个数据，作为input输入框的内容
|
||||
indexKey: 1, //data.value 的第几个数据，作为input输入框的内容
|
||||
allowNoKeyword: false, //是否允许无关键字时请求数据
|
||||
multiWord: true, //以分隔符号分割的多关键字支持
|
||||
separator: ",", //多关键字支持时的分隔符，默认为空格
|
||||
getDataMethod: "url", //获取数据的方式，总是从 URL 获取
|
||||
effectiveFieldsAlias: {
|
||||
Id: "序号",
|
||||
Keyword: "关键字",
|
||||
Count: "数量"
|
||||
},
|
||||
showHeader: true,
|
||||
url: 'http://suggest.taobao.com/sug?code=utf-8&extras=1&q=',
|
||||
/*优先从url ajax 请求 json 帮助数据，注意最后一个参数为关键字请求参数*/
|
||||
jsonp: 'callback',
|
||||
/*如果从 url 获取数据，并且需要跨域，则该参数必须设置*/
|
||||
processData: function (json) { // url 获取数据时，对数据的处理，作为 getData 的回调函数
|
||||
var i, len, data = {
|
||||
value: []
|
||||
};
|
||||
|
||||
if (!json || !json.result || json.result.length == 0) {
|
||||
return false;
|
||||
}
|
||||
|
||||
console.log(json);
|
||||
len = json.result.length;
|
||||
|
||||
for (i = 0; i < len; i++) {
|
||||
data.value.push({
|
||||
"Id": (i + 1),
|
||||
"Keyword": json.result[i][0],
|
||||
"Count": json.result[i][1]
|
||||
});
|
||||
}
|
||||
console.log(data);
|
||||
return data;
|
||||
}
|
||||
});
|
||||
|
||||
$('#typeahead-demo-1').typeahead({
|
||||
source: ["ruoyi 1","ruoyi 2","ruoyi 3"]
|
||||
});
|
||||
|
||||
$('#typeahead-demo-2').typeahead({
|
||||
source: [
|
||||
{"name": "Afghanistan", "code": "AF", "ccn0": "040"},
|
||||
{"name": "Land Islands", "code": "AX", "ccn0": "050"},
|
||||
{"name": "Albania", "code": "AL","ccn0": "060"},
|
||||
{"name": "Algeria", "code": "DZ","ccn0": "070"}
|
||||
]
|
||||
});
|
||||
|
||||
$.get(ctx + "demo/form/collection", function(data){
|
||||
$("#typeahead-demo-3").typeahead({
|
||||
source: data.value
|
||||
});
|
||||
},'json');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,593 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<th:block th:include="include :: header('基本表单')" />
|
||||
</head>
|
||||
<body class="gray-bg">
|
||||
<div class="wrapper wrapper-content animated fadeInRight">
|
||||
<div class="row">
|
||||
<div class="col-sm-7">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>基本表单 <small>简单登录表单示例</small></h5>
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="form_basic.html#">
|
||||
<i class="fa fa-wrench"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-user">
|
||||
<li><a href="form_basic.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="form_basic.html#">选项2</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<div class="row">
|
||||
<div class="col-sm-6 b-r">
|
||||
<h3 class="m-t-none m-b">登录</h3>
|
||||
<p>欢迎登录本站(⊙o⊙)</p>
|
||||
<form role="form">
|
||||
<div class="form-group">
|
||||
<label>用户名</label>
|
||||
<input type="email" placeholder="请输入您注册的E-mail" class="form-control">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>密码</label>
|
||||
<input type="password" placeholder="请输入密码" class="form-control">
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-sm btn-primary pull-right m-t-n-xs" type="submit"><strong>登 录</strong>
|
||||
</button>
|
||||
<label>
|
||||
<input type="checkbox">自动登录</label>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<h4>还不是会员？</h4>
|
||||
<p>您可以注册一个新账户</p>
|
||||
<p class="text-center">
|
||||
<a href="form_basic.html"><i class="fa fa-sign-in big-icon"></i></a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-5">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>横向表单</h5>
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="form_basic.html#">
|
||||
<i class="fa fa-wrench"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-user">
|
||||
<li><a href="form_basic.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="form_basic.html#">选项2</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<form class="form-horizontal">
|
||||
<p>欢迎登录本站(⊙o⊙)</p>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">用户名：</label>
|
||||
|
||||
<div class="col-sm-8">
|
||||
<input type="email" placeholder="用户名" class="form-control"> <span class="help-block m-b-none">请输入您注册时所填的E-mail</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">密码：</label>
|
||||
|
||||
<div class="col-sm-8">
|
||||
<input type="password" placeholder="密码" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="col-sm-offset-3 col-sm-8">
|
||||
<button class="btn btn-sm btn-white" type="submit">登 录</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-8">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>内联表单</h5>
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="form_basic.html#">
|
||||
<i class="fa fa-wrench"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-user">
|
||||
<li><a href="form_basic.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="form_basic.html#">选项2</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<form role="form" class="form-inline">
|
||||
<div class="form-group">
|
||||
<label for="exampleInputEmail2" class="sr-only">用户名</label>
|
||||
<input type="email" placeholder="请输入用户名" id="exampleInputEmail2" class="form-control">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="exampleInputPassword2" class="sr-only">密码</label>
|
||||
<input type="password" placeholder="请输入密码" id="exampleInputPassword2" class="form-control">
|
||||
</div>
|
||||
<div class="checkbox m-l m-r-xs">
|
||||
<label>
|
||||
<input type="checkbox"><i></i> 自动登录</label>
|
||||
</div>
|
||||
<button class="btn btn-white" type="submit">登录</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>弹出表单 <small>弹出框登录示例</small></h5>
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="form_basic.html#">
|
||||
<i class="fa fa-wrench"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-user">
|
||||
<li><a href="form_basic.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="form_basic.html#">选项2</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<div class="text-center">
|
||||
<a data-toggle="modal" class="btn btn-primary" href="form_basic.html#modal-form">打开登录窗口</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>所有表单元素 <small>包括自定义样式的复选和单选按钮</small></h5>
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="form_basic.html#">
|
||||
<i class="fa fa-wrench"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-user">
|
||||
<li><a href="form_basic.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="form_basic.html#">选项2</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<form method="get" class="form-horizontal">
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label">普通</label>
|
||||
|
||||
<div class="col-sm-10">
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
<div class="hr-line-dashed"></div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label">带说明信息</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="text" class="form-control"> <span class="help-block m-b-none">帮助文本，可能会超过一行，以块级元素显示</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hr-line-dashed"></div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label">密码</label>
|
||||
|
||||
<div class="col-sm-10">
|
||||
<input type="password" class="form-control" name="password">
|
||||
</div>
|
||||
</div>
|
||||
<div class="hr-line-dashed"></div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label">提示</label>
|
||||
|
||||
<div class="col-sm-10">
|
||||
<input type="text" placeholder="提示信息" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
<div class="hr-line-dashed"></div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label">禁用</label>
|
||||
|
||||
<div class="col-sm-10">
|
||||
<input type="text" disabled="" placeholder="已被禁用" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
<div class="hr-line-dashed"></div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label">静态控制</label>
|
||||
|
||||
<div class="col-sm-10">
|
||||
<p class="form-control-static">ruoyi.vip</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hr-line-dashed"></div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label">复选框&单选框
|
||||
<br/>
|
||||
<small class="text-navy">普通Bootstrap元素</small>
|
||||
</label>
|
||||
|
||||
<div class="col-sm-10">
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" value="">选项1</label>
|
||||
</div>
|
||||
<div class="radio">
|
||||
<label>
|
||||
<input type="radio" checked="" value="option1" id="optionsRadios1" name="optionsRadios">选项1</label>
|
||||
</div>
|
||||
<div class="radio">
|
||||
<label>
|
||||
<input type="radio" value="option2" id="optionsRadios2" name="optionsRadios">选项2</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hr-line-dashed"></div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label">内联复选框</label>
|
||||
|
||||
<div class="col-sm-10">
|
||||
<label class="checkbox-inline">
|
||||
<input type="checkbox" value="option1" id="inlineCheckbox1">a</label>
|
||||
<label class="checkbox-inline">
|
||||
<input type="checkbox" value="option2" id="inlineCheckbox2">b</label>
|
||||
<label class="checkbox-inline">
|
||||
<input type="checkbox" value="option3" id="inlineCheckbox3">c</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hr-line-dashed"></div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label">复选框&单选框
|
||||
<br/><small class="text-navy">自定义样式</small>
|
||||
</label>
|
||||
|
||||
<div class="col-sm-10">
|
||||
<div class="checkbox check-box">
|
||||
<label>
|
||||
<input type="checkbox" value=""> <i></i> 选项1</label>
|
||||
</div>
|
||||
<div class="checkbox check-box">
|
||||
<label>
|
||||
<input type="checkbox" value="" checked=""> <i></i> 选项2（选中）</label>
|
||||
</div>
|
||||
<div class="checkbox check-box">
|
||||
<label>
|
||||
<input type="checkbox" value="" disabled="" checked=""> <i></i> 选项3（选中并禁用）</label>
|
||||
</div>
|
||||
<div class="checkbox check-box">
|
||||
<label>
|
||||
<input type="checkbox" value="" disabled=""> <i></i> 选项4（禁用）</label>
|
||||
</div>
|
||||
<div class="radio check-box">
|
||||
<label>
|
||||
<input type="radio" value="option1" name="a"> <i></i> 选项1</label>
|
||||
</div>
|
||||
<div class="radio check-box">
|
||||
<label>
|
||||
<input type="radio" checked="" value="option2" name="a"> <i></i> 选项2（选中）</label>
|
||||
</div>
|
||||
<div class="radio check-box">
|
||||
<label>
|
||||
<input type="radio" disabled="" checked="" value="option2"> <i></i> 选项3（选中并禁用）</label>
|
||||
</div>
|
||||
<div class="radio check-box">
|
||||
<label>
|
||||
<input type="radio" disabled="" name="a"> <i></i> 选项4（禁用）</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hr-line-dashed"></div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label">内联复选框</label>
|
||||
|
||||
<div class="col-sm-10">
|
||||
<label class="checkbox-inline check-box">
|
||||
<input type="checkbox" value="option1">a</label>
|
||||
<label class="checkbox-inline check-box">
|
||||
<input type="checkbox" value="option2">b</label>
|
||||
<label class="checkbox-inline check-box">
|
||||
<input type="checkbox" value="option3">c</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hr-line-dashed"></div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label">Select</label>
|
||||
|
||||
<div class="col-sm-10">
|
||||
<select class="form-control m-b" name="account">
|
||||
<option>选项 1</option>
|
||||
<option>选项 2</option>
|
||||
<option>选项 3</option>
|
||||
<option>选项 4</option>
|
||||
</select>
|
||||
|
||||
<div class="col-sm-4 m-l-n">
|
||||
<select class="form-control" multiple="">
|
||||
<option>选项 1</option>
|
||||
<option>选项 2</option>
|
||||
<option>选项 3</option>
|
||||
<option>选项 4</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hr-line-dashed"></div>
|
||||
<div class="form-group has-success">
|
||||
<label class="col-sm-2 control-label">验证通过</label>
|
||||
|
||||
<div class="col-sm-10">
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
<div class="hr-line-dashed"></div>
|
||||
<div class="form-group has-warning">
|
||||
<label class="col-sm-2 control-label">未填写</label>
|
||||
|
||||
<div class="col-sm-10">
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
<div class="hr-line-dashed"></div>
|
||||
<div class="form-group has-error">
|
||||
<label class="col-sm-2 control-label">验证未通过</label>
|
||||
|
||||
<div class="col-sm-10">
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
<div class="hr-line-dashed"></div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label">自定义尺寸</label>
|
||||
|
||||
<div class="col-sm-10">
|
||||
<input type="text" placeholder=".input-lg" class="form-control input-lg m-b">
|
||||
<input type="text" placeholder="Default input" class="form-control m-b">
|
||||
<input type="text" placeholder=".input-sm" class="form-control input-sm">
|
||||
</div>
|
||||
</div>
|
||||
<div class="hr-line-dashed"></div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label">列尺寸</label>
|
||||
|
||||
<div class="col-sm-10">
|
||||
<div class="row">
|
||||
<div class="col-md-2">
|
||||
<input type="text" placeholder=".col-md-2" class="form-control">
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<input type="text" placeholder=".col-md-3" class="form-control">
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<input type="text" placeholder=".col-md-4" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hr-line-dashed"></div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label">文本框组</label>
|
||||
|
||||
<div class="col-sm-10">
|
||||
<div class="input-group m-b"><span class="input-group-addon">@</span>
|
||||
<input type="text" placeholder="用户名" class="form-control">
|
||||
</div>
|
||||
<div class="input-group m-b">
|
||||
<input type="text" class="form-control"> <span class="input-group-addon">.00</span>
|
||||
</div>
|
||||
<div class="input-group m-b"><span class="input-group-addon">¥</span>
|
||||
<input type="text" class="form-control"> <span class="input-group-addon">.00</span>
|
||||
</div>
|
||||
<div class="input-group m-b"><span class="input-group-addon"> <input type="checkbox"> </span>
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
<div class="input-group"><span class="input-group-addon"> <input type="radio"> </span>
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hr-line-dashed"></div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label">按钮插件</label>
|
||||
|
||||
<div class="col-sm-10">
|
||||
<div class="input-group m-b"><span class="input-group-btn">
|
||||
<button type="button" class="btn btn-primary">搜</button> </span>
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control"> <span class="input-group-btn"> <button type="button" class="btn btn-primary">搜索
|
||||
</button> </span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hr-line-dashed"></div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label">带下拉框</label>
|
||||
|
||||
<div class="col-sm-10">
|
||||
<div class="input-group m-b">
|
||||
<div class="input-group-btn">
|
||||
<button data-toggle="dropdown" class="btn btn-white dropdown-toggle" type="button">操作 <span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="form_basic.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="form_basic.html#">选项2</a>
|
||||
</li>
|
||||
<li><a href="form_basic.html#">选项3</a>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="form_basic.html#">选项4</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control">
|
||||
|
||||
<div class="input-group-btn">
|
||||
<button data-toggle="dropdown" class="btn btn-white dropdown-toggle" type="button">操作 <span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu pull-right">
|
||||
<li><a href="form_basic.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="form_basic.html#">选项2</a>
|
||||
</li>
|
||||
<li><a href="form_basic.html#">选项3</a>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="form_basic.html#">选项4</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hr-line-dashed"></div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label">分段</label>
|
||||
|
||||
<div class="col-sm-10">
|
||||
<div class="input-group m-b">
|
||||
<div class="input-group-btn">
|
||||
<button tabindex="-1" class="btn btn-white" type="button">操作</button>
|
||||
<button data-toggle="dropdown" class="btn btn-white dropdown-toggle" type="button"><span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="form_basic.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="form_basic.html#">选项2</a>
|
||||
</li>
|
||||
<li><a href="form_basic.html#">选项3</a>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="form_basic.html#">选项4</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control">
|
||||
|
||||
<div class="input-group-btn">
|
||||
<button tabindex="-1" class="btn btn-white" type="button">操作</button>
|
||||
<button data-toggle="dropdown" class="btn btn-white dropdown-toggle" type="button"><span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu pull-right">
|
||||
分段
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hr-line-dashed"></div>
|
||||
<div class="form-group">
|
||||
<div class="col-sm-4 col-sm-offset-2">
|
||||
<button class="btn btn-primary" type="submit">保存内容</button>
|
||||
<button class="btn btn-white" type="submit">取消</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="modal-form" class="modal fade" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-body">
|
||||
<div class="row">
|
||||
<div class="col-sm-6 b-r">
|
||||
<h3 class="m-t-none m-b">登录</h3>
|
||||
|
||||
<p>欢迎登录本站(⊙o⊙)</p>
|
||||
|
||||
<form role="form">
|
||||
<div class="form-group">
|
||||
<label>用户名：</label>
|
||||
<input type="email" placeholder="请输入用户名" class="form-control">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>密码：</label>
|
||||
<input type="password" placeholder="请输入密码" class="form-control">
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-sm btn-primary pull-right m-t-n-xs" type="submit"><strong>登录</strong>
|
||||
</button>
|
||||
<label>
|
||||
<input type="checkbox" class="i-checks">自动登录</label>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<h4>还不是会员？</h4>
|
||||
<p>您可以注册一个账户</p>
|
||||
<p class="text-center">
|
||||
<a href="form_basic.html"><i class="fa fa-sign-in big-icon"></i></a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<th:block th:include="include :: footer" />
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,620 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<th:block th:include="include :: header('按钮')" />
|
||||
</head>
|
||||
<body class="gray-bg">
|
||||
<div class="row wrapper wrapper-content animated fadeInRight">
|
||||
<div class="col-sm-4">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>按钮颜色</h5>
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="buttons.html#">
|
||||
<i class="fa fa-wrench"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-user">
|
||||
<li><a href="buttons.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#">选项2</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<p>
|
||||
可使用class来快速改变按钮的颜色，如<code>.btn-primary</code>
|
||||
</p>
|
||||
|
||||
<h3 class="font-bold">
|
||||
普通按钮
|
||||
</h3>
|
||||
<p>
|
||||
<button type="button" class="btn btn-w-m btn-default">btn-default</button>
|
||||
<button type="button" class="btn btn-w-m btn-primary">btn-primary</button>
|
||||
<button type="button" class="btn btn-w-m btn-success">btn-success</button>
|
||||
<button type="button" class="btn btn-w-m btn-info">btn-info</button>
|
||||
<button type="button" class="btn btn-w-m btn-warning">btn-warning</button>
|
||||
<button type="button" class="btn btn-w-m btn-danger">btn-danger</button>
|
||||
<button type="button" class="btn btn-w-m btn-white">btn-white</button>
|
||||
<button type="button" class="btn btn-w-m btn-link">btn-link</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>按钮大小</h5>
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="buttons.html#">
|
||||
<i class="fa fa-wrench"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-user">
|
||||
<li><a href="buttons.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#">选项2</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<p>
|
||||
可以通过添加class的值为<code>.btn-lg</code>, <code>.btn-sm</code>, or <code>.btn-xs</code>来修改按钮的大小
|
||||
</p>
|
||||
<h3 class="font-bold">按钮尺寸</h3>
|
||||
<p>
|
||||
<button type="button" class="btn btn-primary btn-lg">大按钮</button>
|
||||
<button type="button" class="btn btn-default btn-lg">大按钮</button>
|
||||
<br/>
|
||||
<button type="button" class="btn btn-primary">默认按钮</button>
|
||||
<button type="button" class="btn btn-default">默认按钮</button>
|
||||
<br/>
|
||||
<button type="button" class="btn btn-primary btn-sm">小按钮</button>
|
||||
<button type="button" class="btn btn-default btn-sm">小按钮</button>
|
||||
<br/>
|
||||
<button type="button" class="btn btn-primary btn-xs">Mini按钮</button>
|
||||
<button type="button" class="btn btn-default btn-xs">Mini按钮</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>线性按钮</h5>
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="buttons.html#">
|
||||
<i class="fa fa-wrench"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-user">
|
||||
<li><a href="buttons.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#">选项2</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<p>
|
||||
要使用线性按钮，可添加class<code>.btn-block</code>或<code>.btn-outline</code>
|
||||
</p>
|
||||
|
||||
<h3 class="font-bold">线性按钮</h3>
|
||||
<p>
|
||||
<button type="button" class="btn btn-outline btn-default">默认</button>
|
||||
<button type="button" class="btn btn-outline btn-primary">主要</button>
|
||||
<button type="button" class="btn btn-outline btn-success">成功</button>
|
||||
<button type="button" class="btn btn-outline btn-info">信息</button>
|
||||
<button type="button" class="btn btn-outline btn-warning">警告</button>
|
||||
<button type="button" class="btn btn-outline btn-danger">危险</button>
|
||||
<button type="button" class="btn btn-outline btn-link">链接</button>
|
||||
</p>
|
||||
<h3 class="font-bold">块级按钮</h3>
|
||||
<p>
|
||||
<button type="button" class="btn btn-block btn-outline btn-primary">这是一个块级按钮</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>3D按钮</h5>
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="buttons.html#">
|
||||
<i class="fa fa-wrench"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-user">
|
||||
<li><a href="buttons.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#">选项2</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<p>
|
||||
可以通过添加<code>.dim</code>class来使用3D按钮.
|
||||
</p>
|
||||
<h3 class="font-bold">3D按钮</h3>
|
||||
|
||||
<button class="btn btn-primary dim btn-large-dim" type="button"><i class="fa fa-money"></i>
|
||||
</button>
|
||||
<button class="btn btn-warning dim btn-large-dim" type="button"><i class="fa fa-warning"></i>
|
||||
</button>
|
||||
<button class="btn btn-danger dim btn-large-dim" type="button"><i class="fa fa-heart"></i>
|
||||
</button>
|
||||
<button class="btn btn-primary dim btn-large-dim" type="button"><i class="fa fa-dollar"></i>6</button>
|
||||
<button class="btn btn-info dim btn-large-dim btn-outline" type="button"><i class="fa fa-ruble"></i>
|
||||
</button>
|
||||
<button class="btn btn-primary dim" type="button"><i class="fa fa-money"></i>
|
||||
</button>
|
||||
<button class="btn btn-warning dim" type="button"><i class="fa fa-warning"></i>
|
||||
</button>
|
||||
<button class="btn btn-primary dim" type="button"><i class="fa fa-check"></i>
|
||||
</button>
|
||||
<button class="btn btn-success dim" type="button"><i class="fa fa-upload"></i>
|
||||
</button>
|
||||
<button class="btn btn-info dim" type="button"><i class="fa fa-paste"></i>
|
||||
</button>
|
||||
<button class="btn btn-warning dim" type="button"><i class="fa fa-warning"></i>
|
||||
</button>
|
||||
<button class="btn btn-default dim " type="button"><i class="fa fa-star"></i>
|
||||
</button>
|
||||
<button class="btn btn-danger dim " type="button"><i class="fa fa-heart"></i>
|
||||
</button>
|
||||
|
||||
<button class="btn btn-outline btn-primary dim" type="button"><i class="fa fa-money"></i>
|
||||
</button>
|
||||
<button class="btn btn-outline btn-warning dim" type="button"><i class="fa fa-warning"></i>
|
||||
</button>
|
||||
<button class="btn btn-outline btn-primary dim" type="button"><i class="fa fa-check"></i>
|
||||
</button>
|
||||
<button class="btn btn-outline btn-success dim" type="button"><i class="fa fa-upload"></i>
|
||||
</button>
|
||||
<button class="btn btn-outline btn-info dim" type="button"><i class="fa fa-paste"></i>
|
||||
</button>
|
||||
<button class="btn btn-outline btn-warning dim" type="button"><i class="fa fa-warning"></i>
|
||||
</button>
|
||||
<button class="btn btn-outline btn-danger dim " type="button"><i class="fa fa-heart"></i>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>下拉按钮</h5>
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="buttons.html#">
|
||||
<i class="fa fa-wrench"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-user">
|
||||
<li><a href="buttons.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#">选项2</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<p>
|
||||
下拉按钮可使用任何颜色任何大小
|
||||
</p>
|
||||
|
||||
<h3 class="font-bold">下拉按钮</h3>
|
||||
<div class="btn-group">
|
||||
<button data-toggle="dropdown" class="btn btn-primary dropdown-toggle">操作 <span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="buttons.html#">置顶</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#" class="font-bold">修改</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#">禁用</a>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="buttons.html#">删除</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button data-toggle="dropdown" class="btn btn-warning dropdown-toggle">操作 <span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="buttons.html#">置顶</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#">修改</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#">禁用</a>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="buttons.html#">删除</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button data-toggle="dropdown" class="btn btn-default dropdown-toggle">操作 <span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="buttons.html#">置顶</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#" class="font-bold">修改</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#">禁用</a>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="buttons.html#">删除</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
<div class="btn-group">
|
||||
<button data-toggle="dropdown" class="btn btn-primary btn-sm dropdown-toggle">操作 <span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="buttons.html#">置顶</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#" class="font-bold">修改</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#">禁用</a>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="buttons.html#">删除</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button data-toggle="dropdown" class="btn btn-warning btn-sm dropdown-toggle">操作 <span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="buttons.html#">置顶</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#" class="font-bold">修改</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#">禁用</a>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="buttons.html#">删除</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button data-toggle="dropdown" class="btn btn-default btn-sm dropdown-toggle">操作 <span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="buttons.html#">置顶</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#" class="font-bold">修改</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#">禁用</a>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="buttons.html#">删除</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<br/>
|
||||
<div class="btn-group">
|
||||
<button data-toggle="dropdown" class="btn btn-primary btn-xs dropdown-toggle">操作 <span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="buttons.html#">置顶</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#" class="font-bold">修改</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#">禁用</a>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="buttons.html#">删除</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button data-toggle="dropdown" class="btn btn-warning btn-xs dropdown-toggle">操作 <span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="buttons.html#">置顶</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#" class="font-bold">修改</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#">禁用</a>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="buttons.html#">删除</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button data-toggle="dropdown" class="btn btn-default btn-xs dropdown-toggle">操作 <span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="buttons.html#">置顶</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#" class="font-bold">修改</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#">禁用</a>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="buttons.html#">删除</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>按钮组</h5>
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="buttons.html#">
|
||||
<i class="fa fa-wrench"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-user">
|
||||
<li><a href="buttons.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#">选项2</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
|
||||
<h3 class="font-bold">按钮组</h3>
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-white" type="button">左</button>
|
||||
<button class="btn btn-primary" type="button">中</button>
|
||||
<button class="btn btn-white" type="button">右</button>
|
||||
</div>
|
||||
<br/>
|
||||
<br/>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-white"><i class="fa fa-chevron-left"></i>
|
||||
</button>
|
||||
<button class="btn btn-white">1</button>
|
||||
<button class="btn btn-white active">2</button>
|
||||
<button class="btn btn-white">3</button>
|
||||
<button class="btn btn-white">4</button>
|
||||
<button type="button" class="btn btn-white"><i class="fa fa-chevron-right"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>图标按钮 </h5>
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="buttons.html#">
|
||||
<i class="fa fa-wrench"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-user">
|
||||
<li><a href="buttons.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#">选项2</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<p>
|
||||
任何按钮都可以在左侧或右侧添加图标
|
||||
</p>
|
||||
|
||||
<h3 class="font-bold">图标按钮</h3>
|
||||
<p>
|
||||
<button class="btn btn-primary " type="button"><i class="fa fa-check"></i> 提交</button>
|
||||
<button class="btn btn-success " type="button"><i class="fa fa-upload"></i> <span class="bold">上传</span>
|
||||
</button>
|
||||
<button class="btn btn-info " type="button"><i class="fa fa-paste"></i> 编辑</button>
|
||||
<button class="btn btn-warning " type="button"><i class="fa fa-warning"></i> <span class="bold">警告</span>
|
||||
</button>
|
||||
<button class="btn btn-default " type="button"><i class="fa fa-map-marker"></i> 百度地图</button>
|
||||
|
||||
<a class="btn btn-success">
|
||||
<i class="fa fa-weixin"> </i> 分享到微信
|
||||
</a>
|
||||
<a class="btn btn-success btn-outline">
|
||||
<i class="fa fa-qq"> </i> 使用QQ账号登录
|
||||
</a>
|
||||
<a class="btn btn-white btn-bitbucket">
|
||||
<i class="fa fa-user-md"></i>
|
||||
</a>
|
||||
<a class="btn btn-white btn-bitbucket">
|
||||
<i class="fa fa-group"></i>
|
||||
</a>
|
||||
<a class="btn btn-white btn-bitbucket">
|
||||
<i class="fa fa-wrench"></i>
|
||||
</a>
|
||||
<a class="btn btn-white btn-bitbucket">
|
||||
<i class="fa fa-exchange"></i>
|
||||
</a>
|
||||
<a class="btn btn-white btn-bitbucket">
|
||||
<i class="fa fa-check-circle-o"></i>
|
||||
</a>
|
||||
<a class="btn btn-white btn-bitbucket">
|
||||
<i class="fa fa-road"></i>
|
||||
</a>
|
||||
<a class="btn btn-white btn-bitbucket">
|
||||
<i class="fa fa-ambulance"></i>
|
||||
</a>
|
||||
<a class="btn btn-white btn-bitbucket">
|
||||
<i class="fa fa-star"></i> 收藏
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<h3 class="font-bold">按钮切换</h3>
|
||||
<button data-toggle="button" class="btn btn-primary btn-outline" type="button">按钮1</button>
|
||||
<button data-toggle="button" class="btn btn-primary" type="button">按钮2</button>
|
||||
<div data-toggle="buttons-checkbox" class="btn-group">
|
||||
<button class="btn btn-primary active" type="button"><i class="fa fa-bold"></i> 粗体</button>
|
||||
<button class="btn btn-primary" type="button"><i class="fa fa-underline"></i> 下划线</button>
|
||||
<button class="btn btn-primary active" type="button"><i class="fa fa-italic"></i> 斜体</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>圆形图标按钮</h5>
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="buttons.html#">
|
||||
<i class="fa fa-wrench"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-user">
|
||||
<li><a href="buttons.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#">选项2</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<p>
|
||||
要使用圆形图标按钮，可以通过添加class为<code>.btn-circle</code>实现
|
||||
</p>
|
||||
|
||||
<h3 class="font-bold">圆形按钮</h3>
|
||||
<br/>
|
||||
<button class="btn btn-default btn-circle" type="button"><i class="fa fa-check"></i>
|
||||
</button>
|
||||
<button class="btn btn-primary btn-circle" type="button"><i class="fa fa-list"></i>
|
||||
</button>
|
||||
<button class="btn btn-success btn-circle" type="button"><i class="fa fa-link"></i>
|
||||
</button>
|
||||
<button class="btn btn-info btn-circle" type="button"><i class="fa fa-check"></i>
|
||||
</button>
|
||||
<button class="btn btn-warning btn-circle" type="button"><i class="fa fa-times"></i>
|
||||
</button>
|
||||
<button class="btn btn-danger btn-circle" type="button"><i class="fa fa-heart"></i>
|
||||
</button>
|
||||
<button class="btn btn-danger btn-circle btn-outline" type="button"><i class="fa fa-heart"></i>
|
||||
</button>
|
||||
<br/>
|
||||
<br/>
|
||||
<button class="btn btn-default btn-circle btn-lg" type="button"><i class="fa fa-check"></i>
|
||||
</button>
|
||||
<button class="btn btn-primary btn-circle btn-lg" type="button"><i class="fa fa-list"></i>
|
||||
</button>
|
||||
<button class="btn btn-success btn-circle btn-lg" type="button"><i class="fa fa-link"></i>
|
||||
</button>
|
||||
<button class="btn btn-info btn-circle btn-lg" type="button"><i class="fa fa-check"></i>
|
||||
</button>
|
||||
<button class="btn btn-warning btn-circle btn-lg" type="button"><i class="fa fa-times"></i>
|
||||
</button>
|
||||
<button class="btn btn-danger btn-circle btn-lg" type="button"><i class="fa fa-heart"></i>
|
||||
</button>
|
||||
<button class="btn btn-danger btn-circle btn-lg btn-outline" type="button"><i class="fa fa-heart"></i>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>圆角按钮</h5>
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="buttons.html#">
|
||||
<i class="fa fa-wrench"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-user">
|
||||
<li><a href="buttons.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#">选项2</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<p>
|
||||
可以通过添加class的值微<code>.btn-rounded</code>来实现圆角按钮
|
||||
</p>
|
||||
|
||||
<h3 class="font-bold">按钮组</h3>
|
||||
<p>
|
||||
<a class="btn btn-default btn-rounded" href="buttons.html#">默认</a>
|
||||
<a class="btn btn-primary btn-rounded" href="buttons.html#">主要</a>
|
||||
<a class="btn btn-success btn-rounded" href="buttons.html#">成果</a>
|
||||
<a class="btn btn-info btn-rounded" href="buttons.html#">信息</a>
|
||||
<a class="btn btn-warning btn-rounded" href="buttons.html#">警告</a>
|
||||
<a class="btn btn-danger btn-rounded" href="buttons.html#">危险</a>
|
||||
<a class="btn btn-danger btn-rounded btn-outline" href="buttons.html#">危险</a>
|
||||
<br/>
|
||||
<br/>
|
||||
<a class="btn btn-primary btn-rounded btn-block" href="buttons.html#"><i class="fa fa-info-circle"></i> 圆角块级带图标按钮</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<th:block th:include="include :: footer" />
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,235 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<th:block th:include="include :: header('日期和时间')" />
|
||||
<th:block th:include="include :: datetimepicker-css" />
|
||||
</head>
|
||||
<body class="gray-bg">
|
||||
<div class="wrapper wrapper-content animated fadeInRight">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>日期选择器 <small>https://github.com/smalot/bootstrap-datetimepicker</small></h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">简单示例</label>
|
||||
<div class="input-group date">
|
||||
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
|
||||
<input type="text" class="form-control" id="datetimepicker-demo-1" placeholder="yyyy-MM-dd HH:mm">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">显示年月日</label>
|
||||
<div class="input-group date">
|
||||
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
|
||||
<input type="text" class="form-control" id="datetimepicker-demo-2" placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">显示年月日时分秒</label>
|
||||
<div class="input-group date">
|
||||
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
|
||||
<input type="text" class="form-control" id="datetimepicker-demo-3" placeholder="yyyy-MM-dd HH:mm:ss">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">带清空的按钮</label>
|
||||
<div class="input-group date form_date">
|
||||
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
|
||||
<input class="form-control" size="16" type="text" readonly>
|
||||
<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">日期范围选择</label>
|
||||
<div class="input-daterange input-group">
|
||||
<input type="text" class="input-sm form-control" id="datetimepicker-startTime" placeholder="yyyy-MM-dd"/>
|
||||
<span class="input-group-addon">到</span>
|
||||
<input type="text" class="input-sm form-control" id="datetimepicker-endTime" placeholder="yyyy-MM-dd"/>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">相关参数详细信息</label>
|
||||
<div><a href="http://doc.ruoyi.vip/#/standard/zjwd?id=bootstrap-datetimepicker" target="_blank">http://doc.ruoyi.vip/#/standard/zjwd?id=bootstrap-datetimepicker</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>日期选择器 <small>https://github.com/sentsin/laydate</small></h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">简单示例</label>
|
||||
<div class="input-group date">
|
||||
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
|
||||
<input type="text" class="form-control" id="laydate-demo-1" placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">显示年月日</label>
|
||||
<div class="input-group date">
|
||||
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
|
||||
<input type="text" class="form-control" id="laydate-demo-2" placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">显示年月日时分秒</label>
|
||||
<div class="input-group date">
|
||||
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
|
||||
<input type="text" class="form-control" id="laydate-demo-3" placeholder="yyyy-MM-dd HH:mm:ss">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">单框范围选择</label>
|
||||
<div class="input-group date">
|
||||
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
|
||||
<input type="text" class="form-control" id="laydate-demo-4" placeholder="yyyy-MM-dd - yyyy-MM-dd">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">日期范围选择</label>
|
||||
<div class="input-daterange input-group">
|
||||
<input type="text" class="input-sm form-control" id="laydate-startTime" placeholder="yyyy-MM-dd"/>
|
||||
<span class="input-group-addon">到</span>
|
||||
<input type="text" class="input-sm form-control" id="laydate-endTime" placeholder="yyyy-MM-dd"/>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">相关参数详细信息</label>
|
||||
<div><a href="http://doc.ruoyi.vip/#/standard/zjwd?id=laydate" target="_blank">http://doc.ruoyi.vip/#/standard/zjwd?id=laydate</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<th:block th:include="include :: footer" />
|
||||
<th:block th:include="include :: datetimepicker-js" />
|
||||
<script type="text/javascript">
|
||||
$(function(){
|
||||
<!-- datetimepicker示例 -->
|
||||
$("#datetimepicker-demo-1").datetimepicker();
|
||||
|
||||
$("#datetimepicker-demo-2").datetimepicker({
|
||||
format: "yyyy-mm-dd",
|
||||
minView: "month",
|
||||
autoclose: true
|
||||
});
|
||||
|
||||
$("#datetimepicker-demo-3").datetimepicker({
|
||||
format: "yyyy-mm-dd hh:ii:ss",
|
||||
autoclose: true
|
||||
});
|
||||
|
||||
$('.form_date').datetimepicker({
|
||||
format: "yyyy-mm-dd",
|
||||
minView: "month",
|
||||
autoclose: true
|
||||
});
|
||||
|
||||
$("#datetimepicker-startTime").datetimepicker({
|
||||
format: 'yyyy-mm-dd',
|
||||
minView: "month",
|
||||
todayBtn: true,
|
||||
autoclose: true,
|
||||
endDate : new Date(),
|
||||
}).on('changeDate', function(event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
var startTime = event.date;
|
||||
$('#datetimepicker-endTime').datetimepicker('setStartDate', startTime);
|
||||
});
|
||||
|
||||
$("#datetimepicker-endTime").datetimepicker({
|
||||
format: 'yyyy-mm-dd',
|
||||
minView: "month",
|
||||
todayBtn: true,
|
||||
autoclose: true,
|
||||
endDate : new Date(),
|
||||
}).on('changeDate', function(event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
var endTime = event.date;
|
||||
$("#datetimepicker-startTime").datetimepicker('setEndDate', endTime);
|
||||
});
|
||||
|
||||
<!-- laydate示例 -->
|
||||
layui.use('laydate', function(){
|
||||
var laydate = layui.laydate;
|
||||
|
||||
laydate.render({
|
||||
elem: '#laydate-demo-1'
|
||||
});
|
||||
|
||||
laydate.render({
|
||||
elem: '#laydate-demo-2',
|
||||
type: 'date'
|
||||
});
|
||||
|
||||
laydate.render({
|
||||
elem: '#laydate-demo-3',
|
||||
type: 'datetime'
|
||||
});
|
||||
|
||||
laydate.render({
|
||||
elem: '#laydate-demo-4',
|
||||
range: true
|
||||
});
|
||||
|
||||
var startDate = laydate.render({
|
||||
elem: '#laydate-startTime',
|
||||
max: $('#laydate-endTime').val(),
|
||||
theme: 'molv',
|
||||
trigger: 'click',
|
||||
done: function(value, date) {
|
||||
// 结束时间大于开始时间
|
||||
if (value !== '') {
|
||||
endDate.config.min.year = date.year;
|
||||
endDate.config.min.month = date.month - 1;
|
||||
endDate.config.min.date = date.date;
|
||||
} else {
|
||||
endDate.config.min.year = '';
|
||||
endDate.config.min.month = '';
|
||||
endDate.config.min.date = '';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
var endDate = laydate.render({
|
||||
elem: '#laydate-endTime',
|
||||
min: $('#laydate-startTime').val(),
|
||||
theme: 'molv',
|
||||
trigger: 'click',
|
||||
done: function(value, date) {
|
||||
// 开始时间小于结束时间
|
||||
if (value !== '') {
|
||||
startDate.config.max.year = date.year;
|
||||
startDate.config.max.month = date.month - 1;
|
||||
startDate.config.max.date = date.date;
|
||||
} else {
|
||||
startDate.config.max.year = '';
|
||||
startDate.config.max.month = '';
|
||||
startDate.config.max.date = '';
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<th:block th:include="include :: header('左右互选组件')" />
|
||||
<th:block th:include="include :: bootstrap-duallistbox-css" />
|
||||
</head>
|
||||
<body class="gray-bg">
|
||||
<div class="wrapper wrapper-content animated fadeInRight">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="ibox">
|
||||
<div class="ibox-title">
|
||||
<h5>双重列表框 <small>https://github.com/istvan-ujjmeszaros/bootstrap-duallistbox</small></h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<p>
|
||||
Bootstrap Dual Listbox是针对Twitter Bootstrap进行了优化的响应式双列表框。它适用于所有现代浏览器和触摸设备。
|
||||
</p>
|
||||
|
||||
<form id="form" action="#" class="wizard-big">
|
||||
<select class="form-control dual_select" multiple>
|
||||
<option value="1">若依1</option>
|
||||
<option value="2">若依2</option>
|
||||
<option value="3">若依3</option>
|
||||
<option selected value="4">若依4</option>
|
||||
<option selected value="5">若依5</option>
|
||||
<option value="6">若依6</option>
|
||||
<option value="7">若依7</option>
|
||||
<option value="8">若依8</option>
|
||||
<option value="9">若依9</option>
|
||||
<option value="10">若依10</option>
|
||||
<option value="11">若依11</option>
|
||||
<option value="12">若依12</option>
|
||||
</select>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<th:block th:include="include :: footer" />
|
||||
<th:block th:include="include :: bootstrap-duallistbox-js" />
|
||||
<script type="text/javascript">
|
||||
$('.dual_select').bootstrapDualListbox({
|
||||
nonSelectedListLabel: '未有用户',
|
||||
selectedListLabel: '已有用户',
|
||||
preserveSelectionOnMove: 'moved',
|
||||
moveOnSelect: false, // 出现一个剪头，表示可以一次选择一个
|
||||
filterTextClear: '展示所有',
|
||||
moveSelectedLabel: "添加",
|
||||
moveAllLabel: '添加所有',
|
||||
removeSelectedLabel: "移除",
|
||||
removeAllLabel: '移除所有',
|
||||
infoText: '共{0}个',
|
||||
showFilterInputs: false, // 是否带搜索
|
||||
selectorMinimalHeight: 160
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,432 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<th:block th:include="include :: header('栅格')" />
|
||||
</head>
|
||||
<body class="gray-bg">
|
||||
<div class="wrapper wrapper-content">
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>栅格设置</h5>
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="grid_options.html#">
|
||||
<i class="fa fa-wrench"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-user">
|
||||
<li><a href="grid_options.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="grid_options.html#">选项2</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
|
||||
<p>通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。</p>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>
|
||||
超小屏幕
|
||||
<small>手机 (<768px)</small>
|
||||
</th>
|
||||
<th>
|
||||
小屏幕
|
||||
<small>平板 (≥768px)</small>
|
||||
</th>
|
||||
<th>
|
||||
中等屏幕
|
||||
<small>桌面显示器 (≥992px)</small>
|
||||
</th>
|
||||
<th>
|
||||
大屏幕
|
||||
<small>大桌面显示器 (≥1200px)</small>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th class="text-nowrap">栅格系统行为</th>
|
||||
<td>总是水平排列</td>
|
||||
<td colspan="3">开始是堆叠在一起的，当大于这些阈值时将变为水平排列C</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-nowrap"><code>.container</code> 最大宽度</th>
|
||||
<td>None （自动）</td>
|
||||
<td>750px</td>
|
||||
<td>970px</td>
|
||||
<td>1170px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-nowrap">类前缀</th>
|
||||
<td><code>.col-xs-</code>
|
||||
</td>
|
||||
<td><code>.col-sm-</code>
|
||||
</td>
|
||||
<td><code>.col-md-</code>
|
||||
</td>
|
||||
<td><code>.col-lg-</code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-nowrap">列（column）数</th>
|
||||
<td colspan="4">12</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-nowrap">最大列（column）宽</th>
|
||||
<td class="text-muted">自动</td>
|
||||
<td>~62px</td>
|
||||
<td>~81px</td>
|
||||
<td>~97px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-nowrap">槽（gutter）宽</th>
|
||||
<td colspan="4">30px （每列左右均有 15px）</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-nowrap">可嵌套</th>
|
||||
<td colspan="4">是</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-nowrap">偏移（Offsets）</th>
|
||||
<td colspan="4">是</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-nowrap">列排序</th>
|
||||
<td colspan="4">是</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>从堆叠到水平排列</h5>
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="grid_options.html#">
|
||||
<i class="fa fa-wrench"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-user">
|
||||
<li><a href="grid_options.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="grid_options.html#">选项2</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
|
||||
<p>使用单一的一组 <code>.col-md-*</code> 栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。所有“列（column）必须放在 ” <code>.row</code> 内。</p>
|
||||
<div class="row show-grid">
|
||||
<div class="col-md-1">.col-md-1</div>
|
||||
<div class="col-md-1">.col-md-1</div>
|
||||
<div class="col-md-1">.col-md-1</div>
|
||||
<div class="col-md-1">.col-md-1</div>
|
||||
<div class="col-md-1">.col-md-1</div>
|
||||
<div class="col-md-1">.col-md-1</div>
|
||||
<div class="col-md-1">.col-md-1</div>
|
||||
<div class="col-md-1">.col-md-1</div>
|
||||
<div class="col-md-1">.col-md-1</div>
|
||||
<div class="col-md-1">.col-md-1</div>
|
||||
<div class="col-md-1">.col-md-1</div>
|
||||
<div class="col-md-1">.col-md-1</div>
|
||||
</div>
|
||||
<div class="row show-grid">
|
||||
<div class="col-md-8">.col-md-8</div>
|
||||
<div class="col-md-4">.col-md-4</div>
|
||||
</div>
|
||||
<div class="row show-grid">
|
||||
<div class="col-md-4">.col-md-4</div>
|
||||
<div class="col-md-4">.col-md-4</div>
|
||||
<div class="col-md-4">.col-md-4</div>
|
||||
</div>
|
||||
<div class="row show-grid">
|
||||
<div class="col-md-6">.col-md-6</div>
|
||||
<div class="col-md-6">.col-md-6</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>移动设备和桌面屏幕</h5>
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="grid_options.html#">
|
||||
<i class="fa fa-wrench"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-user">
|
||||
<li><a href="grid_options.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="grid_options.html#">选项2</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
|
||||
<p>是否不希望在小屏幕设备上所有列都堆叠在一起？那就使用针对超小屏幕和中等屏幕设备所定义的类吧，即 <code>.col-xs-*</code> 和 <code>.col-md-*</code>。请看下面的实例，研究一下这些是如何工作的。</p>
|
||||
<div class="row show-grid">
|
||||
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
|
||||
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
|
||||
</div>
|
||||
<div class="row show-grid">
|
||||
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
|
||||
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
|
||||
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
|
||||
</div>
|
||||
<div class="row show-grid">
|
||||
<div class="col-xs-6">.col-xs-6</div>
|
||||
<div class="col-xs-6">.col-xs-6</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>手机、平板、桌面</h5>
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="grid_options.html#">
|
||||
<i class="fa fa-wrench"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-user">
|
||||
<li><a href="grid_options.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="grid_options.html#">选项2</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
|
||||
<p>在上面案例的基础上，通过使用针对平板设备的 <code>.col-sm-*</code> 类，我们来创建更加动态和强大的布局吧。</p>
|
||||
<div class="row show-grid">
|
||||
<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
|
||||
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
|
||||
</div>
|
||||
<div class="row show-grid">
|
||||
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
|
||||
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
|
||||
<!-- Optional: clear the XS cols if their content doesn't match in height -->
|
||||
<div class="clearfix visible-xs"></div>
|
||||
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>多余的列（column）将另起一行排列</h5>
|
||||
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="grid_options.html#">
|
||||
<i class="fa fa-wrench"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-user">
|
||||
<li><a href="grid_options.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="grid_options.html#">选项2</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<p>在等宽的4网格中，网格不等高会碰到问题，为了解决这个问题，可使用<code>.clearfix</code>。<a href="grid_options.html#responsive-utilities">响应实用工具类</a>
|
||||
</p>
|
||||
<div class="row show-grid">
|
||||
<div class="col-xs-6 col-sm-3">
|
||||
.col-xs-6 .col-sm-3
|
||||
<br>调整窗口大小或者在手机上查看本示例
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
|
||||
|
||||
<!-- Add the extra clearfix for only the required viewport -->
|
||||
<div class="clearfix visible-xs"></div>
|
||||
|
||||
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
|
||||
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>列偏移</h5>
|
||||
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="grid_options.html#">
|
||||
<i class="fa fa-wrench"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-user">
|
||||
<li><a href="grid_options.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="grid_options.html#">选项2</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
|
||||
<p>使用 <code>.col-md-offset-*</code> 类可以将列向右侧偏移。这些类实际是通过使用 <code>*</code> 选择器为当前元素增加了左侧的边距（margin）。例如，<code>.col-md-offset-4</code> 类将 <code>.col-md-4</code> 元素向右侧偏移了4个列（column）的宽度。</p>
|
||||
<div class="row show-grid">
|
||||
<div class="col-md-4">.col-md-4</div>
|
||||
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
|
||||
</div>
|
||||
<div class="row show-grid">
|
||||
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
|
||||
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
|
||||
</div>
|
||||
<div class="row show-grid">
|
||||
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>嵌套列</h5>
|
||||
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="grid_options.html#">
|
||||
<i class="fa fa-wrench"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-user">
|
||||
<li><a href="grid_options.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="grid_options.html#">选项2</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<p>为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 <code>.row</code> 元素和一系列 <code>.col-sm-*</code> 元素到已经存在的 <code>.col-sm-*</code> 元素内。被嵌套的行（row）所包含的列（column）的个数不能超过12（其实，没有要求你必须占满12列）。</p>
|
||||
<div class="row show-grid">
|
||||
<div class="col-md-9">
|
||||
第一级： .col-md-9
|
||||
<div class="row show-grid">
|
||||
<div class="col-md-6">
|
||||
第二级： .col-md-6
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
第二级： .col-md-6
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>列排序</h5>
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="grid_options.html#">
|
||||
<i class="fa fa-wrench"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-user">
|
||||
<li><a href="grid_options.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="grid_options.html#">选项2</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<p>通过使用 <code>.col-md-push-*</code> 和 <code>.col-md-pull-*</code> 类就可以很容易的改变列（column）的顺序。</p>
|
||||
<div class="row show-grid">
|
||||
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
|
||||
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<th:block th:include="include :: footer" />
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,118 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<th:block th:include="include :: header('功能扩展')" />
|
||||
<th:block th:include="include :: jasny-bootstrap-css" />
|
||||
</head>
|
||||
<body class="gray-bg">
|
||||
<div class="wrapper wrapper-content animated fadeInRight">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>文件上传控件 <small>https://github.com/jasny/bootstrap</small></h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">输入组示例</label>
|
||||
|
||||
<div class="fileinput fileinput-new input-group" data-provides="fileinput">
|
||||
<div class="form-control" data-trigger="fileinput"><i class="glyphicon glyphicon-file fileinput-exists"></i> <span class="fileinput-filename"></span></div>
|
||||
<span class="input-group-addon btn btn-white btn-file"><span class="fileinput-new">选择文件</span><span class="fileinput-exists">更改</span><input type="file"></span>
|
||||
<a href="#" class="input-group-addon btn btn-white fileinput-exists" data-dismiss="fileinput">清除</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">按钮示例</label>
|
||||
<br/>
|
||||
<div class="fileinput fileinput-new" data-provides="fileinput">
|
||||
<span class="btn btn-white btn-file"><span class="fileinput-new">选择文件</span><span class="fileinput-exists">更改</span><input type="file" name="..."></span>
|
||||
<span class="fileinput-filename"></span>
|
||||
<a href="#" class="close fileinput-exists" data-dismiss="fileinput" style="float: none">×</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">图片上传示例</label>
|
||||
<br/>
|
||||
<div class="fileinput fileinput-new" data-provides="fileinput">
|
||||
<div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;"></div>
|
||||
<div>
|
||||
<span class="btn btn-white btn-file"><span class="fileinput-new">选择图片</span><span class="fileinput-exists">更改</span><input type="file"></span>
|
||||
<a href="#" class="btn btn-white fileinput-exists" data-dismiss="fileinput">清除</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">图片预览示例</label>
|
||||
<br/>
|
||||
<div class="fileinput fileinput-new" data-provides="fileinput">
|
||||
<div class="fileinput-new thumbnail" style="width: 140px; height: 140px;">
|
||||
<img th:src="@{/img/profile.jpg}">
|
||||
</div>
|
||||
<div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;"></div>
|
||||
<div>
|
||||
<span class="btn btn-white btn-file"><span class="fileinput-new">选择图片</span><span class="fileinput-exists">更改</span><input type="file"></span>
|
||||
<a href="#" class="btn btn-white fileinput-exists" data-dismiss="fileinput">清除</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">相关参数详细信息</label>
|
||||
<div><a href="http://doc.ruoyi.vip/#/standard/zjwd?id=jasny-bootstrap" target="_blank">http://doc.ruoyi.vip/#/standard/zjwd?id=jasny-bootstrap</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>固定格式文本 <small>https://github.com/jasny/bootstrap</small></h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">手机号码格式</label>
|
||||
<input type="text" class="form-control" data-mask="999-9999-9999" placeholder="请输入手机号码">
|
||||
<span class="help-block">158-8888-88888</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">电话号码格式</label>
|
||||
<input type="text" class="form-control" data-mask="9999-9999999" placeholder="请输入电话号码">
|
||||
<span class="help-block">0730-8888888</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">日期格式</label>
|
||||
<input type="text" class="form-control" data-mask="9999-99-99" placeholder="请输入日期格式">
|
||||
<span class="help-block">yyyy-mm-dd</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">IPV4格式</label>
|
||||
<input type="text" class="form-control" data-mask="999.999.999.999" placeholder="请输入IP地址">
|
||||
<span class="help-block">192.168.100.200</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">税务代码格式</label>
|
||||
<input type="text" class="form-control" data-mask="99-9999999" placeholder="请输入税务代码">
|
||||
<span class="help-block">99-9999999</span>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">相关参数详细信息</label>
|
||||
<div><a href="http://doc.ruoyi.vip/#/standard/zjwd?id=jasny-bootstrap" target="_blank">http://doc.ruoyi.vip/#/standard/zjwd?id=jasny-bootstrap</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<th:block th:include="include :: footer" />
|
||||
<th:block th:include="include :: jasny-bootstrap-js" />
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,259 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<th:block th:include="include :: header('下拉框')" />
|
||||
<th:block th:include="include :: select2-css" />
|
||||
<th:block th:include="include :: bootstrap-select-css" />
|
||||
</head>
|
||||
<body class="gray-bg">
|
||||
<form>
|
||||
<div class="wrapper wrapper-content animated fadeInRight">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>下拉框 <small>https://github.com/select2/select2</small></h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">单选</label>
|
||||
<select class="form-control">
|
||||
<option value="">--请选择开发语言--</option>
|
||||
<option value="Java">Java</option>
|
||||
<option value="PHP">PHP</option>
|
||||
<option value=".NET">.NET</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">分组单选</label>
|
||||
<select class="form-control">
|
||||
<optgroup label="--请选择开发语言--">
|
||||
<option value="Java">Java</option>
|
||||
<option value="PHP">PHP</option>
|
||||
<option value=".NET">.NET</option>
|
||||
</optgroup>
|
||||
<optgroup label="--请选择数据库--">
|
||||
<option value="Oracle">Oracle</option>
|
||||
<option value="Mysql">Mysql</option>
|
||||
<option value="Sysbase">Sysbase</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">多选</label>
|
||||
<select class="form-control select2-multiple" multiple>
|
||||
<option value="">请选择开发语言</option>
|
||||
<option value="Java">Java</option>
|
||||
<option value="PHP">PHP</option>
|
||||
<option value=".NET">.NET</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">分组多选</label>
|
||||
<select class="form-control select2-multiple" multiple>
|
||||
<optgroup label="--请选择开发语言--">
|
||||
<option value="Java">Java</option>
|
||||
<option value="PHP">PHP</option>
|
||||
<option value=".NET">.NET</option>
|
||||
</optgroup>
|
||||
<optgroup label="--请选择数据库--">
|
||||
<option value="Oracle">Oracle</option>
|
||||
<option value="Mysql">Mysql</option>
|
||||
<option value="Sysbase">Sysbase</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">相关参数详细信息</label>
|
||||
<div><a href="http://doc.ruoyi.vip/#/standard/zjwd?id=select2" target="_blank">http://doc.ruoyi.vip/#/standard/zjwd?id=select2</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>下拉框 <small>https://github.com/snapappointments/bootstrap-select</small></h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">单选</label>
|
||||
<select class="form-control noselect2 selectpicker">
|
||||
<option value="">--请选择开发语言--</option>
|
||||
<option value="Java">Java</option>
|
||||
<option value="PHP">PHP</option>
|
||||
<option value=".NET">.NET</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">分组多选</label>
|
||||
<select class="form-control noselect2 selectpicker">
|
||||
<optgroup label="--请选择开发语言--">
|
||||
<option value="Java">Java</option>
|
||||
<option value="PHP">PHP</option>
|
||||
<option value=".NET">.NET</option>
|
||||
</optgroup>
|
||||
<optgroup label="--请选择数据库--">
|
||||
<option value="Oracle">Oracle</option>
|
||||
<option value="Mysql">Mysql</option>
|
||||
<option value="Sysbase">Sysbase</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">多选</label>
|
||||
<select class="form-control noselect2 selectpicker" data-none-selected-text="请选择开发语言" multiple>
|
||||
<option value="Java">Java</option>
|
||||
<option value="PHP">PHP</option>
|
||||
<option value=".NET">.NET</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">分组多选</label>
|
||||
<select class="form-control noselect2 selectpicker" data-none-selected-text="请选择" multiple>
|
||||
<optgroup label="--请选择开发语言--">
|
||||
<option value="Java">Java</option>
|
||||
<option value="PHP">PHP</option>
|
||||
<option value=".NET">.NET</option>
|
||||
</optgroup>
|
||||
<optgroup label="--请选择数据库--">
|
||||
<option value="Oracle">Oracle</option>
|
||||
<option value="Mysql">Mysql</option>
|
||||
<option value="Sysbase">Sysbase</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">相关参数详细信息</label>
|
||||
<div><a href="http://doc.ruoyi.vip/#/standard/zjwd?id=bootstrap-select" target="_blank">http://doc.ruoyi.vip/#/standard/zjwd?id=bootstrap-select</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<th:block th:include="include :: footer" />
|
||||
<th:block th:include="include :: select2-js" />
|
||||
<th:block th:include="include :: bootstrap-select-js" />
|
||||
<script type="text/javascript">
|
||||
$(function(){
|
||||
<!-- datetimepicker示例 -->
|
||||
$("#datetimepicker-demo-1").datetimepicker();
|
||||
|
||||
$("#datetimepicker-demo-2").datetimepicker({
|
||||
format: "yyyy-mm-dd",
|
||||
minView: "month",
|
||||
autoclose: true
|
||||
});
|
||||
|
||||
$("#datetimepicker-demo-3").datetimepicker({
|
||||
format: "yyyy-mm-dd hh:ii:ss",
|
||||
autoclose: true
|
||||
});
|
||||
|
||||
$('.form_date').datetimepicker({
|
||||
format: "yyyy-mm-dd",
|
||||
minView: "month",
|
||||
autoclose: true
|
||||
});
|
||||
|
||||
$("#datetimepicker-startTime").datetimepicker({
|
||||
format: 'yyyy-mm-dd',
|
||||
minView: "month",
|
||||
todayBtn: true,
|
||||
autoclose: true,
|
||||
endDate : new Date(),
|
||||
}).on('changeDate', function(event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
var startTime = event.date;
|
||||
$('#datetimepicker-endTime').datetimepicker('setStartDate', startTime);
|
||||
});
|
||||
|
||||
$("#datetimepicker-endTime").datetimepicker({
|
||||
format: 'yyyy-mm-dd',
|
||||
minView: "month",
|
||||
todayBtn: true,
|
||||
autoclose: true,
|
||||
endDate : new Date(),
|
||||
}).on('changeDate', function(event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
var endTime = event.date;
|
||||
$("#datetimepicker-startTime").datetimepicker('setEndDate', endTime);
|
||||
});
|
||||
|
||||
<!-- laydate示例 -->
|
||||
layui.use('laydate', function(){
|
||||
var laydate = layui.laydate;
|
||||
|
||||
laydate.render({
|
||||
elem: '#laydate-demo-1'
|
||||
});
|
||||
|
||||
laydate.render({
|
||||
elem: '#laydate-demo-2',
|
||||
type: 'date'
|
||||
});
|
||||
|
||||
laydate.render({
|
||||
elem: '#laydate-demo-3',
|
||||
type: 'datetime'
|
||||
});
|
||||
|
||||
laydate.render({
|
||||
elem: '#laydate-demo-4',
|
||||
range: true
|
||||
});
|
||||
|
||||
var startDate = laydate.render({
|
||||
elem: '#laydate-startTime',
|
||||
max: $('#laydate-endTime').val(),
|
||||
theme: 'molv',
|
||||
trigger: 'click',
|
||||
done: function(value, date) {
|
||||
// 结束时间大于开始时间
|
||||
if (value !== '') {
|
||||
endDate.config.min.year = date.year;
|
||||
endDate.config.min.month = date.month - 1;
|
||||
endDate.config.min.date = date.date;
|
||||
} else {
|
||||
endDate.config.min.year = '';
|
||||
endDate.config.min.month = '';
|
||||
endDate.config.min.date = '';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
var endDate = laydate.render({
|
||||
elem: '#laydate-endTime',
|
||||
min: $('#laydate-startTime').val(),
|
||||
theme: 'molv',
|
||||
trigger: 'click',
|
||||
done: function(value, date) {
|
||||
// 开始时间小于结束时间
|
||||
if (value !== '') {
|
||||
startDate.config.max.year = date.year;
|
||||
startDate.config.max.month = date.month - 1;
|
||||
startDate.config.max.date = date.date;
|
||||
} else {
|
||||
startDate.config.max.year = '';
|
||||
startDate.config.max.month = '';
|
||||
startDate.config.max.date = '';
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,198 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<th:block th:include="include :: header('拖动排序')" />
|
||||
</head>
|
||||
<body class="gray-bg">
|
||||
<div class="wrapper wrapper-content animated fadeInRight">
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
<div class="ibox">
|
||||
<div class="ibox-content">
|
||||
<h3>任务列表</h3>
|
||||
<p class="small"><i class="fa fa-hand-o-up"></i> 在列表之间拖动任务面板</p>
|
||||
|
||||
<div class="input-group">
|
||||
<input type="text" placeholder="添加新任务" class="input input-sm form-control">
|
||||
<span class="input-group-btn">
|
||||
<button type="button" class="btn btn-sm btn-white"> <i class="fa fa-plus"></i> 添加</button>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<ul class="sortable-list connectList agile-list">
|
||||
<li class="warning-element">
|
||||
加强过程管理，及时统计教育经费使用情况，做到底码清楚，
|
||||
<div class="agile-detail">
|
||||
<a href="#" class="pull-right btn btn-xs btn-white">标签</a>
|
||||
<i class="fa fa-clock-o"></i> 2018.09.01
|
||||
</div>
|
||||
</li>
|
||||
<li class="success-element">
|
||||
支持财会人员的继续培训工作。
|
||||
<div class="agile-detail">
|
||||
<a href="#" class="pull-right btn btn-xs btn-white">标记</a>
|
||||
<i class="fa fa-clock-o"></i> 2018.05.12
|
||||
</div>
|
||||
</li>
|
||||
<li class="info-element">
|
||||
协同教导处搞好助学金、减免教科书费的工作。
|
||||
<div class="agile-detail">
|
||||
<a href="#" class="pull-right btn btn-xs btn-white">标记</a>
|
||||
<i class="fa fa-clock-o"></i> 2018.09.10
|
||||
</div>
|
||||
</li>
|
||||
<li class="danger-element">
|
||||
要求会计、出纳人员严格执行财务制度，遵守岗位职责，按时上报各种资料。
|
||||
<div class="agile-detail">
|
||||
<a href="#" class="pull-right btn btn-xs btn-primary">确定</a>
|
||||
<i class="fa fa-clock-o"></i> 2018.06.10
|
||||
</div>
|
||||
</li>
|
||||
<li class="warning-element">
|
||||
做好职工公费医疗工作，按时发放门诊费。
|
||||
<div class="agile-detail">
|
||||
<a href="#" class="pull-right btn btn-xs btn-white">标签</a>
|
||||
<i class="fa fa-clock-o"></i> 2018.09.09
|
||||
</div>
|
||||
</li>
|
||||
<li class="warning-element">
|
||||
有计划地把课本复习三至五遍。
|
||||
<div class="agile-detail">
|
||||
<a href="#" class="pull-right btn btn-xs btn-primary">确定</a>
|
||||
<i class="fa fa-clock-o"></i> 2018.08.04
|
||||
</div>
|
||||
</li>
|
||||
<li class="success-element">
|
||||
看一本高质量的高中语法书
|
||||
<div class="agile-detail">
|
||||
<a href="#" class="pull-right btn btn-xs btn-white">标记</a>
|
||||
<i class="fa fa-clock-o"></i> 2018.05.12
|
||||
</div>
|
||||
</li>
|
||||
<li class="info-element">
|
||||
选择一份较好的英语报纸，通过阅读提高英语学习效果。
|
||||
<div class="agile-detail">
|
||||
<a href="#" class="pull-right btn btn-xs btn-white">标记</a>
|
||||
<i class="fa fa-clock-o"></i> 2018.09.10
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="ibox">
|
||||
<div class="ibox-content">
|
||||
<h3>进行中</h3>
|
||||
<p class="small"><i class="fa fa-hand-o-up"></i> 在列表之间拖动任务面板</p>
|
||||
<ul class="sortable-list connectList agile-list">
|
||||
<li class="success-element">
|
||||
全面、较深入地掌握我们“产品”的功能、特色和优势并做到应用自如。
|
||||
<div class="agile-detail">
|
||||
<a href="#" class="pull-right btn btn-xs btn-white">标签</a>
|
||||
<i class="fa fa-clock-o"></i> 2018.09.01
|
||||
</div>
|
||||
</li>
|
||||
<li class="success-element">
|
||||
根据自己以前所了解的和从其他途径搜索到的信息，录入客户资料150家。
|
||||
<div class="agile-detail">
|
||||
<a href="#" class="pull-right btn btn-xs btn-white">标记</a>
|
||||
<i class="fa fa-clock-o"></i> 2018.05.12
|
||||
</div>
|
||||
</li>
|
||||
<li class="warning-element">
|
||||
锁定有意向客户20家。
|
||||
<div class="agile-detail">
|
||||
<a href="#" class="pull-right btn btn-xs btn-white">标记</a>
|
||||
<i class="fa fa-clock-o"></i> 2018.09.10
|
||||
</div>
|
||||
</li>
|
||||
<li class="warning-element">
|
||||
力争完成销售指标。
|
||||
<div class="agile-detail">
|
||||
<a href="#" class="pull-right btn btn-xs btn-white">标签</a>
|
||||
<i class="fa fa-clock-o"></i> 2018.09.09
|
||||
</div>
|
||||
</li>
|
||||
<li class="info-element">
|
||||
在总结和摸索中前进。
|
||||
<div class="agile-detail">
|
||||
<a href="#" class="pull-right btn btn-xs btn-primary">确定</a>
|
||||
<i class="fa fa-clock-o"></i> 2018.08.04
|
||||
</div>
|
||||
</li>
|
||||
<li class="success-element">
|
||||
不断学习行业知识、产品知识，为客户带来实用介绍内容
|
||||
<div class="agile-detail">
|
||||
<a href="#" class="pull-right btn btn-xs btn-white">标记</a>
|
||||
<i class="fa fa-clock-o"></i> 2018.05.12
|
||||
</div>
|
||||
</li>
|
||||
<li class="danger-element">
|
||||
先友后单：与客户发展良好友谊，转换销售员角色，处处为客户着想
|
||||
<div class="agile-detail">
|
||||
<a href="#" class="pull-right btn btn-xs btn-white">标记</a>
|
||||
<i class="fa fa-clock-o"></i> 2018.11.04
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="ibox">
|
||||
<div class="ibox-content">
|
||||
<h3>已完成</h3>
|
||||
<p class="small"><i class="fa fa-hand-o-up"></i> 在列表之间拖动任务面板</p>
|
||||
<ul class="sortable-list connectList agile-list">
|
||||
<li class="info-element">
|
||||
制定工作日程表
|
||||
<div class="agile-detail">
|
||||
<a href="#" class="pull-right btn btn-xs btn-white">标记</a>
|
||||
<i class="fa fa-clock-o"></i> 2018.09.10
|
||||
</div>
|
||||
</li>
|
||||
<li class="warning-element">
|
||||
每天坚持打40个有效电话，挖掘潜在客户
|
||||
<div class="agile-detail">
|
||||
<a href="#" class="pull-right btn btn-xs btn-white">标签</a>
|
||||
<i class="fa fa-clock-o"></i> 2018.09.09
|
||||
</div>
|
||||
</li>
|
||||
<li class="warning-element">
|
||||
拜访客户之前要对该客户做全面的了解(客户的潜在需求、职位、权限以及个人性格和爱好)
|
||||
<div class="agile-detail">
|
||||
<a href="#" class="pull-right btn btn-xs btn-white">标签</a>
|
||||
<i class="fa fa-clock-o"></i> 2018.09.09
|
||||
</div>
|
||||
</li>
|
||||
<li class="warning-element">
|
||||
提高自己电话营销技巧，灵活专业地与客户进行电话交流
|
||||
<div class="agile-detail">
|
||||
<a href="#" class="pull-right btn btn-xs btn-primary">确定</a>
|
||||
<i class="fa fa-clock-o"></i> 2018.08.04
|
||||
</div>
|
||||
</li>
|
||||
<li class="success-element">
|
||||
通过电话销售过程中了解各盛市的设备仪器使用、采购情况及相关重要追踪人
|
||||
<div class="agile-detail">
|
||||
<a href="#" class="pull-right btn btn-xs btn-white">标记</a>
|
||||
<i class="fa fa-clock-o"></i> 2018.05.12
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<th:block th:include="include :: footer" />
|
||||
<script th:src="@{/js/jquery-ui-1.10.4.min.js}"></script>
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
$(".sortable-list").sortable({connectWith: ".connectList"}).disableSelection()
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,353 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<th:block th:include="include :: header('选项卡 & 面板')" />
|
||||
</head>
|
||||
<body class="gray-bg">
|
||||
<div class="wrapper wrapper-content animated fadeIn">
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>基本面板 <small class="m-l-sm">这是一个自定义面板</small></h5>
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="tabs_panels.html#">
|
||||
<i class="fa fa-wrench"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-user">
|
||||
<li><a href="tabs_panels.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="tabs_panels.html#">选项2</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<h2>
|
||||
Bootstrap<br/>
|
||||
</h2>
|
||||
<p>
|
||||
简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="tabs-container">
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true"> 第一个选项卡</a>
|
||||
</li>
|
||||
<li class=""><a data-toggle="tab" href="#tab-2" aria-expanded="false">第二个选项卡</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
<div id="tab-1" class="tab-pane active">
|
||||
<div class="panel-body">
|
||||
<strong>HTML5 文档类型</strong>
|
||||
<p>Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。在你项目中的每个页面都要参照下面的格式进行设置。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="tab-2" class="tab-pane">
|
||||
<div class="panel-body">
|
||||
<strong>移动设备优先</strong>
|
||||
<p>在 Bootstrap 2 中，我们对框架中的某些关键部分增加了对移动设备友好的样式。而在 Bootstrap 3 中，我们重写了整个框架，使其一开始就是对移动设备友好的。这次不是简单的增加一些可选的针对移动设备的样式，而是直接融合进了框架的内核中。也就是说，Bootstrap 是移动设备优先的。针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-6">
|
||||
<div class="panel blank-panel">
|
||||
|
||||
<div class="panel-heading">
|
||||
<div class="panel-title m-b-md">
|
||||
<h4>图标选项卡</h4>
|
||||
</div>
|
||||
<div class="panel-options">
|
||||
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="active"><a data-toggle="tab" href="tabs_panels.html#tab-4"><i class="fa fa-laptop"></i></a>
|
||||
</li>
|
||||
<li class=""><a data-toggle="tab" href="tabs_panels.html#tab-5"><i class="fa fa-desktop"></i></a>
|
||||
</li>
|
||||
<li class=""><a data-toggle="tab" href="tabs_panels.html#tab-6"><i class="fa fa-signal"></i></a>
|
||||
</li>
|
||||
<li class=""><a data-toggle="tab" href="tabs_panels.html#tab-7"><i class="fa fa-bar-chart-o"></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel-body">
|
||||
<div class="tab-content">
|
||||
<div id="tab-4" class="tab-pane active">
|
||||
<strong>排版与链接</strong>
|
||||
|
||||
<p>Bootstrap 排版、链接样式设置了基本的全局样式。分别是： 为 body 元素设置 background-color: #fff; 使用 @font-family-base、@font-size-base 和 @line-height-base a变量作为排版的基本参数 为所有链接设置了基本颜色 @link-color ，并且当链接处于 :hover 状态时才添加下划线 这些样式都能在 scaffolding.less 文件中找到对应的源码。</p>
|
||||
</div>
|
||||
|
||||
<div id="tab-5" class="tab-pane">
|
||||
<strong>Normalize.css</strong>
|
||||
|
||||
<p>为了增强跨浏览器表现的一致性，我们使用了 Normalize.css，这是由 Nicolas Gallagher 和 Jonathan Neal 维护的一个CSS 重置样式库。</p>
|
||||
</div>
|
||||
<div id="tab-6" class="tab-pane">
|
||||
<strong>布局容器</strong>
|
||||
|
||||
<p>Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。</p>
|
||||
</div>
|
||||
<div id="tab-7" class="tab-pane">
|
||||
<strong>栅格系统</strong>
|
||||
|
||||
<p>Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row m-b-lg">
|
||||
<div class="col-sm-6">
|
||||
<div class="tabs-container">
|
||||
|
||||
<div class="tabs-left">
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="active"><a data-toggle="tab" href="#tab-8"> 第一个选项卡</a>
|
||||
</li>
|
||||
<li class=""><a data-toggle="tab" href="#tab-9"> 第二个选项卡</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content ">
|
||||
<div id="tab-8" class="tab-pane active">
|
||||
<div class="panel-body">
|
||||
<strong>排版与链接</strong>
|
||||
|
||||
<p>Bootstrap 排版、链接样式设置了基本的全局样式。分别是： 为 body 元素设置 background-color: #fff; 使用 @font-family-base、@font-size-base 和 @line-height-base a变量作为排版的基本参数 为所有链接设置了基本颜色 @link-color ，并且当链接处于 :hover 状态时才添加下划线 这些样式都能在 scaffolding.less 文件中找到对应的源码。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="tab-9" class="tab-pane">
|
||||
<div class="panel-body">
|
||||
<strong>栅格系统</strong>
|
||||
|
||||
<p>Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="tabs-container">
|
||||
<div class="tabs-right">
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="active"><a data-toggle="tab" href="#tab-10">第一个选项卡</a>
|
||||
</li>
|
||||
<li class=""><a data-toggle="tab" href="#tab-11"> 第二个选项卡</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content ">
|
||||
<div id="tab-10" class="tab-pane active">
|
||||
<div class="panel-body">
|
||||
<strong>排版与链接</strong>
|
||||
|
||||
<p>Bootstrap 排版、链接样式设置了基本的全局样式。分别是： 为 body 元素设置 background-color: #fff; 使用 @font-family-base、@font-size-base 和 @line-height-base a变量作为排版的基本参数 为所有链接设置了基本颜色 @link-color ，并且当链接处于 :hover 状态时才添加下划线 这些样式都能在 scaffolding.less 文件中找到对应的源码。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="tab-11" class="tab-pane">
|
||||
<div class="panel-body">
|
||||
<strong>栅格系统</strong>
|
||||
|
||||
<p>Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="ibox">
|
||||
<div class="ibox-title">
|
||||
<h5>Bootstrap面板 <small>自定义背景</small></h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
默认面板
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<p>通过 .panel-heading 可以很简单地为面板加入一个标题容器。你也可以通过添加设置了 .panel-title 类的标签，添加一个预定义样式的标题。 为了给链接设置合适的颜色，务必将链接放到带有 .panel-title 类的标题标签内。</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="panel panel-primary">
|
||||
<div class="panel-heading">
|
||||
主要
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<p>通过 .panel-heading 可以很简单地为面板加入一个标题容器。你也可以通过添加设置了 .panel-title 类的标签，添加一个预定义样式的标题。 为了给链接设置合适的颜色，务必将链接放到带有 .panel-title 类的标题标签内。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="panel panel-success">
|
||||
<div class="panel-heading">
|
||||
成功
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<p>通过 .panel-heading 可以很简单地为面板加入一个标题容器。你也可以通过添加设置了 .panel-title 类的标签，添加一个预定义样式的标题。 为了给链接设置合适的颜色，务必将链接放到带有 .panel-title 类的标题标签内。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
<div class="panel panel-info">
|
||||
<div class="panel-heading">
|
||||
<i class="fa fa-info-circle"></i> 信息
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<p>通过 .panel-heading 可以很简单地为面板加入一个标题容器。你也可以通过添加设置了 .panel-title 类的标签，添加一个预定义样式的标题。 为了给链接设置合适的颜色，务必将链接放到带有 .panel-title 类的标题标签内。</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="panel panel-warning">
|
||||
<div class="panel-heading">
|
||||
<i class="fa fa-warning"></i> 警告
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<p>通过 .panel-heading 可以很简单地为面板加入一个标题容器。你也可以通过添加设置了 .panel-title 类的标签，添加一个预定义样式的标题。 为了给链接设置合适的颜色，务必将链接放到带有 .panel-title 类的标题标签内。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="panel panel-danger">
|
||||
<div class="panel-heading">
|
||||
危险
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<p>通过 .panel-heading 可以很简单地为面板加入一个标题容器。你也可以通过添加设置了 .panel-title 类的标签，添加一个预定义样式的标题。 为了给链接设置合适的颜色，务必将链接放到带有 .panel-title 类的标题标签内。</p>
|
||||
</div>
|
||||
<div class="panel-footer">
|
||||
面板Footer
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>折叠面板</h5>
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="tabs_panels.html#">
|
||||
<i class="fa fa-wrench"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-user">
|
||||
<li><a href="tabs_panels.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="tabs_panels.html#">选项2</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<div class="panel-body">
|
||||
<div class="panel-group" id="accordion">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<h5 class="panel-title">
|
||||
<a data-toggle="collapse" data-parent="#accordion" href="tabs_panels.html#collapseOne">标题 #1</a>
|
||||
</h5>
|
||||
</div>
|
||||
<div id="collapseOne" class="panel-collapse collapse in">
|
||||
<div class="panel-body">
|
||||
Bootstrap相关优质项目推荐 这些项目或者是对Bootstrap进行了有益的补充，或者是基于Bootstrap开发的
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<h4 class="panel-title">
|
||||
<a data-toggle="collapse" data-parent="#accordion" href="tabs_panels.html#collapseTwo">标题 #2</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="collapseTwo" class="panel-collapse collapse">
|
||||
<div class="panel-body">
|
||||
Bootstrap相关优质项目推荐 这些项目或者是对Bootstrap进行了有益的补充，或者是基于Bootstrap开发的
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<h4 class="panel-title">
|
||||
<a data-toggle="collapse" data-parent="#accordion" href="tabs_panels.html#collapseThree">标题 #3</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="collapseThree" class="panel-collapse collapse">
|
||||
<div class="panel-body">
|
||||
Bootstrap相关优质项目推荐 这些项目或者是对Bootstrap进行了有益的补充，或者是基于Bootstrap开发的
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="jumbotron">
|
||||
<h1>超大屏幕</h1>
|
||||
<p>Bootstrap 支持的另一个特性，超大屏幕（Jumbotron）。顾名思义该组件可以增加标题的大小，并为登陆页面内容添加更多的外边距（margin）。使用超大屏幕（Jumbotron）的步骤如下：</p>
|
||||
<div class="alert alert-warning">
|
||||
<ol>
|
||||
<li>创建一个带有 class .jumbotron. 的容器</li>
|
||||
<li>除了更大的 <h1>，字体粗细 font-weight 被减为 200px。</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<p><a role="button" class="btn btn-primary btn-lg">了解更多</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<th:block th:include="include :: footer" />
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<th:block th:include="include :: header('文件上传')" />
|
||||
<th:block th:include="include :: bootstrap-fileinput-css" />
|
||||
</head>
|
||||
<body class="gray-bg">
|
||||
<div class="wrapper wrapper-content animated fadeInRight">
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>文件上传控件 <small>https://github.com/kartik-v/bootstrap-fileinput</small></h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">简单示例</label>
|
||||
<div class="file-loading">
|
||||
<input class="file" type="file" multiple data-min-file-count="1" data-theme="fas">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">多文件上传</label>
|
||||
<div class="file-loading">
|
||||
<input id="fileinput-demo-1" type="file" multiple>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">相关参数详细信息</label>
|
||||
<div><a href="http://doc.ruoyi.vip/#/standard/zjwd?id=jasny-bootstrap" target="_blank">http://doc.ruoyi.vip/#/standard/zjwd?id=jasny-bootstrap</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<th:block th:include="include :: footer" />
|
||||
<th:block th:include="include :: bootstrap-fileinput-js" />
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function () {
|
||||
$("#fileinput-demo-1").fileinput({
|
||||
'theme': 'explorer-fas',
|
||||
'uploadUrl': '#',
|
||||
overwriteInitial: false,
|
||||
initialPreviewAsData: true,
|
||||
initialPreview: [
|
||||
"/img/profile.jpg"
|
||||
]
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,193 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<th:block th:include="include :: header('表单校验')" />
|
||||
</head>
|
||||
<body class="gray-bg">
|
||||
<div class="wrapper wrapper-content animated fadeInRight">
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>jQuery Validate 简介</h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<p>jquery.validate.js 是一款优秀的jQuery表单验证插件。它具有如下特点：</p>
|
||||
<ul>
|
||||
<li>安装简单</li>
|
||||
<li>内置超过20种数据验证方法</li>
|
||||
<li>直列错误提示信息</li>
|
||||
<li>可扩展的数据验证方法</li>
|
||||
<li>使用内置的元数据或插件选项来指定您的验证规则</li>
|
||||
<li>优雅的交互设计</li>
|
||||
</ul>
|
||||
<p>官网：<a href="http://jqueryvalidation.org/" target="_blank">http://jqueryvalidation.org/</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>简单示例</h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<form class="form-horizontal m-t" id="commentForm">
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">姓名：</label>
|
||||
<div class="col-sm-8">
|
||||
<input id="cname" name="name" minlength="2" type="text" class="form-control" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">E-mail：</label>
|
||||
<div class="col-sm-8">
|
||||
<input id="cemail" type="email" class="form-control" name="email" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">网站：</label>
|
||||
<div class="col-sm-8">
|
||||
<input id="curl" type="url" class="form-control" name="url">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">说明：</label>
|
||||
<div class="col-sm-8">
|
||||
<textarea id="ccomment" name="comment" class="form-control" required></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="col-sm-4 col-sm-offset-3">
|
||||
<button class="btn btn-primary" type="submit">提交</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-content">
|
||||
<p class="m-t">更多示例请访问官方示例页面：<a href="http://jqueryvalidation.org/files/demo/" target="_blank">查看</a>
|
||||
</p>
|
||||
<p>中文API可参考：<a href="http://doc.ruoyi.vip/#/standard/zjwd?id=jquery-validate" target="_blank">http://doc.ruoyi.vip/#/standard/zjwd?id=jquery-validate</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>完整验证表单</h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<form class="form-horizontal m-t" id="signupForm">
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">姓氏：</label>
|
||||
<div class="col-sm-8">
|
||||
<input id="firstname" name="firstname" class="form-control" type="text">
|
||||
<span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 这里写点提示的内容</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">名字：</label>
|
||||
<div class="col-sm-8">
|
||||
<input id="lastname" name="lastname" class="form-control" type="text" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">用户名：</label>
|
||||
<div class="col-sm-8">
|
||||
<input id="username" name="username" class="form-control" type="text" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">密码：</label>
|
||||
<div class="col-sm-8">
|
||||
<input id="password" name="password" class="form-control" type="password">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">确认密码：</label>
|
||||
<div class="col-sm-8">
|
||||
<input id="confirm_password" name="confirm_password" class="form-control" type="password">
|
||||
<span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 请再次输入您的密码</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">E-mail：</label>
|
||||
<div class="col-sm-8">
|
||||
<input id="email" name="email" class="form-control" type="email">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="col-sm-8 col-sm-offset-3">
|
||||
<button class="btn btn-primary" type="submit">提交</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<th:block th:include="include :: footer" />
|
||||
<script type="text/javascript">
|
||||
$(function(){
|
||||
$("#commentForm").validate();
|
||||
|
||||
var icon = "<i class='fa fa-times-circle'></i> ";
|
||||
$("#signupForm").validate({
|
||||
rules: {
|
||||
firstname: "required",
|
||||
lastname: "required",
|
||||
username: {
|
||||
required: true,
|
||||
minlength: 2
|
||||
},
|
||||
password: {
|
||||
required: true,
|
||||
minlength: 5
|
||||
},
|
||||
confirm_password: {
|
||||
required: true,
|
||||
minlength: 5,
|
||||
equalTo: "#password"
|
||||
},
|
||||
email: {
|
||||
required: true,
|
||||
email: true
|
||||
}
|
||||
},
|
||||
messages: {
|
||||
firstname: icon + "请输入你的姓",
|
||||
lastname: icon + "请输入您的名字",
|
||||
username: {
|
||||
required: icon + "请输入您的用户名",
|
||||
minlength: icon + "用户名必须两个字符以上"
|
||||
},
|
||||
password: {
|
||||
required: icon + "请输入您的密码",
|
||||
minlength: icon + "密码必须5个字符以上"
|
||||
},
|
||||
confirm_password: {
|
||||
required: icon + "请再次输入密码",
|
||||
minlength: icon + "密码必须5个字符以上",
|
||||
equalTo: icon + "两次输入的密码不一致"
|
||||
},
|
||||
email: icon + "请输入您的E-mail"
|
||||
}
|
||||
});
|
||||
|
||||
$("#username").focus(function () {
|
||||
var firstname = $("#firstname").val();
|
||||
var lastname = $("#lastname").val();
|
||||
if (firstname && lastname && !this.value) {
|
||||
this.value = firstname + "." + lastname;
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,192 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<th:block th:include="include :: header('基本表单')" />
|
||||
<th:block th:include="include :: jquery-steps-css" />
|
||||
</head>
|
||||
<body class="gray-bg">
|
||||
<div class="wrapper wrapper-content animated fadeInRight">
|
||||
<div class="row">
|
||||
<div class="col-sm-5">
|
||||
<div class="jumbotron">
|
||||
<h1>表单向导</h1>
|
||||
<p>Smart UI 部件允许您快速创建表单向导接口。</p>
|
||||
<p><a href="https://github.com/rstaib/jquery-steps" target="_blank" class="btn btn-primary btn-lg" role="button">了解 jQuery Steps</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-7">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>基础表单向导</h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<p>
|
||||
这是一个简单的表单向导示例
|
||||
</p>
|
||||
<div id="wizard">
|
||||
<h1>第一步</h1>
|
||||
<div class="step-content">
|
||||
<div class="text-center m-t-md">
|
||||
<h2>第一步</h2>
|
||||
<p>
|
||||
这是第一步的内容
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1>第二步</h1>
|
||||
<div class="step-content">
|
||||
<div class="text-center m-t-md">
|
||||
<h2>第二步</h2>
|
||||
<p>
|
||||
这是第二步的内容
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1>第三步</h1>
|
||||
<div class="step-content">
|
||||
<div class="text-center m-t-md">
|
||||
<h2>第三步</h2>
|
||||
<p>
|
||||
这是第三步的内容
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="ibox">
|
||||
<div class="ibox-title">
|
||||
<h5>带验证的表单向导</h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<h2>
|
||||
带验证的表单向导
|
||||
</h2>
|
||||
<p>
|
||||
下面这个示例展示了如何在表单向导中使用 jQuery Validation 插件
|
||||
</p>
|
||||
|
||||
<form id="form" action="http://www.zi-han.net/theme/hplus/form_wizard.html#" class="wizard-big">
|
||||
<h1>账户</h1>
|
||||
<fieldset>
|
||||
<h2>账户信息</h2>
|
||||
<div class="row">
|
||||
<div class="col-sm-8">
|
||||
<div class="form-group">
|
||||
<label>用户名 *</label>
|
||||
<input id="userName" name="userName" type="text" class="form-control required">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>密码 *</label>
|
||||
<input id="password" name="password" type="text" class="form-control required">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>确认密码 *</label>
|
||||
<input id="confirm" name="confirm" type="text" class="form-control required">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="text-center">
|
||||
<div style="margin-top: 20px">
|
||||
<i class="fa fa-sign-in" style="font-size: 180px;color: #e5e5e5 "></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</fieldset>
|
||||
<h1>个人资料</h1>
|
||||
<fieldset>
|
||||
<h2>个人资料信息</h2>
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="form-group">
|
||||
<label>姓名 *</label>
|
||||
<input id="name" name="name" type="text" class="form-control required">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="form-group">
|
||||
<label>Email *</label>
|
||||
<input id="email" name="email" type="text" class="form-control required email">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>地址 *</label>
|
||||
<input id="address" name="address" type="text" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<h1>警告</h1>
|
||||
<fieldset>
|
||||
<div class="text-center" style="margin-top: 120px">
|
||||
<h2>你是火星人 :-)</h2>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<h1>完成</h1>
|
||||
<fieldset>
|
||||
<h2>条款</h2>
|
||||
<input id="acceptTerms" name="acceptTerms" type="checkbox" class="required">
|
||||
<label for="acceptTerms">我同意注册条款</label>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<th:block th:include="include :: footer" />
|
||||
<th:block th:include="include :: jquery-steps-js" />
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
$("#wizard").steps();
|
||||
$("#form").steps({
|
||||
bodyTag: "fieldset", onStepChanging: function (event, currentIndex, newIndex) {
|
||||
if (currentIndex > newIndex) {
|
||||
return true
|
||||
}
|
||||
if (newIndex === 3 && Number($("#age").val()) < 18) {
|
||||
return false
|
||||
}
|
||||
var form = $(this);
|
||||
if (currentIndex < newIndex) {
|
||||
$(".body:eq(" + newIndex + ") label.error", form).remove();
|
||||
$(".body:eq(" + newIndex + ") .error", form).removeClass("error")
|
||||
}
|
||||
form.validate().settings.ignore = ":disabled,:hidden";
|
||||
return form.valid()
|
||||
}, onStepChanged: function (event, currentIndex, priorIndex) {
|
||||
if (currentIndex === 2 && Number($("#age").val()) >= 18) {
|
||||
$(this).steps("next")
|
||||
}
|
||||
if (currentIndex === 2 && priorIndex === 3) {
|
||||
$(this).steps("previous")
|
||||
}
|
||||
}, onFinishing: function (event, currentIndex) {
|
||||
var form = $(this);
|
||||
form.validate().settings.ignore = ":disabled";
|
||||
return form.valid()
|
||||
}, onFinished: function (event, currentIndex) {
|
||||
var form = $(this);
|
||||
form.submit()
|
||||
}
|
||||
}).validate({
|
||||
errorPlacement: function (error, element) {
|
||||
element.before(error)
|
||||
}, rules: {confirm: {equalTo: "#password"}}
|
||||
})
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,215 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<th:block th:include="include :: header('模态窗口')" />
|
||||
</head>
|
||||
<body class="gray-bg">
|
||||
<div class="wrapper wrapper-content fadeInRight">
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
<div class="ibox ">
|
||||
<div class="ibox-title">
|
||||
<h5>模态窗口</h5>
|
||||
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<p>创建自定义的RuoYi模态窗口可通过添加<code>.inmodal</code>类来实现。 </p>
|
||||
<div class="text-center">
|
||||
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">打开示例窗口</button>
|
||||
</div>
|
||||
<div class="modal inmodal" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content animated bounceInRight">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span>
|
||||
</button>
|
||||
<i class="fa fa-laptop modal-icon"></i>
|
||||
<h4 class="modal-title">窗口标题</h4>
|
||||
<small class="font-bold">这里可以显示副标题。
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p><strong>RuoYi</strong>是一个完全响应式，基于Bootstrap3.3.6最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术，她提供了诸多的强大的可以重新组合的UI组件，并集成了最新的jQuery版本(v2.1.1)，当然，也集成了很多功能强大，用途广泛的jQuery插件，她可以用于所有的Web应用程序，如网站管理后台，网站会员中心，CMS，CRM，OA等等，当然，您也可以对她进行深度定制，以做出更强系统。</p>
|
||||
<div class="form-group">
|
||||
<label>Email</label>
|
||||
<input type="email" placeholder="请输入您的Email" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
|
||||
<button type="button" class="btn btn-primary">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>大小设置</h5>
|
||||
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<p>模态窗口提供两种大小尺寸，可以通过为模态窗口的<code>.modal-dialog</code>添加类来实现 </p>
|
||||
|
||||
<div class="text-center">
|
||||
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal5">大模态窗口</button>
|
||||
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal6">小模态窗口</button>
|
||||
</div>
|
||||
<div class="modal inmodal fade" id="myModal5" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span>
|
||||
</button>
|
||||
<h4 class="modal-title">窗口标题</h4>
|
||||
<small class="font-bold">这里可以显示副标题。
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p><strong>RuoYi</strong>是一个完全响应式，基于Bootstrap3.3.6最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术，她提供了诸多的强大的可以重新组合的UI组件，并集成了最新的jQuery版本(v2.1.1)，当然，也集成了很多功能强大，用途广泛的jQuery插件，她可以用于所有的Web应用程序，如网站管理后台，网站会员中心，CMS，CRM，OA等等，当然，您也可以对她进行深度定制，以做出更强系统。</p>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
|
||||
<button type="button" class="btn btn-primary">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal inmodal fade" id="myModal6" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="modal-dialog modal-sm">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span>
|
||||
</button>
|
||||
<h4 class="modal-title">窗口标题</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p><strong>RuoYi</strong>是一个完全响应式，基于Bootstrap3.3.6最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术，她提供了诸多的强大的可以重新组合的UI组件，并集成了最新的jQuery版本(v2.1.1)，当然，也集成了很多功能强大，用途广泛的jQuery插件，她可以用于所有的Web应用程序，如网站管理后台，网站会员中心，CMS，CRM，OA等等，当然，您也可以对她进行深度定制，以做出更强系统。</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
|
||||
<button type="button" class="btn btn-primary">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-8">
|
||||
<div class="ibox ">
|
||||
<div class="ibox-title">
|
||||
<h5>动画窗口</h5>
|
||||
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<p>您可以通过为模态窗口的<code>.modal-content</code>添加类来实现动画效果 </p>
|
||||
|
||||
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal2">沿X轴转动</button>
|
||||
<div class="modal inmodal" id="myModal2" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content animated flipInY">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span>
|
||||
</button>
|
||||
<h4 class="modal-title">窗口标题</h4>
|
||||
<small class="font-bold">这里可以显示副标题。
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p><strong>RuoYi</strong>是一个完全响应式，基于Bootstrap3.3.6最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术，她提供了诸多的强大的可以重新组合的UI组件，并集成了最新的jQuery版本(v2.1.1)，当然，也集成了很多功能强大，用途广泛的jQuery插件，她可以用于所有的Web应用程序，如网站管理后台，网站会员中心，CMS，CRM，OA等等，当然，您也可以对她进行深度定制，以做出更强系统。</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
|
||||
<button type="button" class="btn btn-primary">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal4">基本动画</button>
|
||||
<div class="modal inmodal" id="myModal4" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content animated fadeIn">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span>
|
||||
</button>
|
||||
<i class="fa fa-clock-o modal-icon"></i>
|
||||
<h4 class="modal-title">窗口标题</h4>
|
||||
<small>这里可以显示副标题。
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p><strong>RuoYi</strong>是一个完全响应式，基于Bootstrap3.3.6最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术，她提供了诸多的强大的可以重新组合的UI组件，并集成了最新的jQuery版本(v2.1.1)，当然，也集成了很多功能强大，用途广泛的jQuery插件，她可以用于所有的Web应用程序，如网站管理后台，网站会员中心，CMS，CRM，OA等等，当然，您也可以对她进行深度定制，以做出更强系统。</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
|
||||
<button type="button" class="btn btn-primary">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox ">
|
||||
<div class="ibox-title">
|
||||
<h5>设置选项</h5>
|
||||
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<p>可以通过数据绑定或者Javascript来实现模态窗口的相关功能，如果使用数据绑定，可以为元素添加<code>data-</code>，如<code>data-backdrop=""</code>。</p>
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 100px;">名称</th>
|
||||
<th style="width: 50px;">类型</th>
|
||||
<th style="width: 50px;">默认值</th>
|
||||
<th>说明</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>backdrop</td>
|
||||
<td>boolean 或 string <code>'static'</code></td>
|
||||
<td>true</td>
|
||||
<td>遮罩层，或使用<code>'static'</code>指定遮罩层与关闭模态窗口不关联</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>keyboard</td>
|
||||
<td>boolean</td>
|
||||
<td>true</td>
|
||||
<td>按Esc键时退出模态窗口</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>show</td>
|
||||
<td>boolean</td>
|
||||
<td>true</td>
|
||||
<td>初始化完成后显示模态窗口</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>remote</td>
|
||||
<td>path</td>
|
||||
<td>false</td>
|
||||
<td>
|
||||
<p><strong class="text-danger">推荐使用数据绑定方式，或使用
|
||||
<a href="http://api.jquery.com/load/">jQuery.load</a></p>
|
||||
<p>远程URL示例：</p>
|
||||
<div class="highlight">
|
||||
<pre><code class="language-html" data-lang="html"><span class="nt"><a</span> <span class="na">data-toggle=</span><span class="s">"modal"</span> <span class="na">href=</span><span class="s">"remote.html"</span> <span class="na">data-target=</span><span class="s">"#modal"</span><span class="nt">></span>Click me<span class="nt"></a></span></code></pre>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<th:block th:include="include :: footer" />
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
|
||||
<head>
|
||||
<th:block th:include="include :: header('新增用户')" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="form-content">
|
||||
<form id="form-user-add" class="form-horizontal">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="form-group">
|
||||
<label class="col-sm-4 control-label"><span style="color: red; ">*</span>用户名称：</label>
|
||||
<div class="col-sm-8">
|
||||
<input name="userName" placeholder="请输入用户名称" class="form-control" type="text">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="form-group">
|
||||
<label class="col-sm-4 control-label"><span style="color: red; ">*</span>归属部门：</label>
|
||||
<div class="col-sm-8">
|
||||
<div class="input-group">
|
||||
<input name="deptName" type="text" placeholder="请选择归属部门" class="form-control">
|
||||
<span class="input-group-addon"><i class="fa fa-search"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="form-group">
|
||||
<label class="col-sm-4 control-label"><span style="color: red; ">*</span>手机号码：</label>
|
||||
<div class="col-sm-8">
|
||||
<input name="phonenumber" placeholder="请输入手机号码" class="form-control" type="text">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="form-group">
|
||||
<label class="col-sm-4 control-label"><span style="color: red; ">*</span>邮箱：</label>
|
||||
<div class="col-sm-8">
|
||||
<input name="email" class="form-control" type="text" placeholder="请输入邮箱">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="form-group">
|
||||
<label class="col-sm-4 control-label"><span style="color: red; ">*</span>登录账号：</label>
|
||||
<div class="col-sm-8">
|
||||
<input name="loginName" placeholder="请输入登录账号" class="form-control" type="text">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="form-group">
|
||||
<label class="col-sm-4 control-label"><span style="color: red; ">*</span>登录密码：</label>
|
||||
<div class="col-sm-8">
|
||||
<input name="password" placeholder="请输入登录密码" class="form-control" type="password">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="form-group">
|
||||
<label class="col-sm-4 control-label">用户性别：</label>
|
||||
<div class="col-sm-8">
|
||||
<div class="input-group" style="width: 100%">
|
||||
<select name="sex" class="form-control m-b" th:with="type=${@dict.getType('sys_user_sex')}">
|
||||
<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="form-group">
|
||||
<label class="col-sm-4 control-label">用户状态：</label>
|
||||
<div class="col-sm-8">
|
||||
<label class="toggle-switch switch-solid">
|
||||
<input type="checkbox" id="status" checked>
|
||||
<span></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<th:block th:include="include :: footer" />
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,245 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<th:block th:include="include :: header('弹层组件')" />
|
||||
</head>
|
||||
<body class="gray-bg">
|
||||
<div class="wrapper wrapper-content fadeInRight">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="ibox">
|
||||
<div class="ibox-title">
|
||||
<h5>信息框</h5>
|
||||
</div>
|
||||
<div class="ibox-content" id="test">
|
||||
<p>通过调用<code>$.modal.alert()</code>实现。 </p>
|
||||
<button type="button" class="btn btn-primary" onclick="$.modal.alert('Hi，你好！')">普通</button>
|
||||
<button type="button" class="btn btn-success" onclick="$.modal.alertSuccess('Hi，你好！')">成功</button>
|
||||
<button type="button" class="btn btn-warning" onclick="$.modal.alertWarning('Hi，你好！')">警告</button>
|
||||
<button type="button" class="btn btn-danger" onclick="$.modal.alertError('Hi，你好！')">失败</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-6">
|
||||
<div class="ibox">
|
||||
<div class="ibox-title">
|
||||
<h5>提示框</h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<p>通过调用<code>$.modal.msg()</code>实现。 </p>
|
||||
<button type="button" class="btn btn-primary" onclick="$.modal.msg('Hi，你好！')">普通</button>
|
||||
<button type="button" class="btn btn-success" onclick="$.modal.msgSuccess('Hi，你好！')">成功</button>
|
||||
<button type="button" class="btn btn-warning" onclick="$.modal.msgWarning('Hi，你好！')">警告</button>
|
||||
<button type="button" class="btn btn-danger" onclick="$.modal.msgError('Hi，你好！')">失败</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="ibox">
|
||||
<div class="ibox-title">
|
||||
<h5>询问框</h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<p>通过调用<code>$.modal.confirm()</code>实现。 </p>
|
||||
<button type="button" class="btn btn-primary" id="button-confirm">询问按钮</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-6">
|
||||
<div class="ibox ">
|
||||
<div class="ibox-title">
|
||||
<h5>消息提示并刷新父窗体</h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<p>通过调用<code>$.modal.msgReload()</code>实现。 </p>
|
||||
<button type="button" class="btn btn-primary" id="button-msgReload">提示刷新按钮</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-6">
|
||||
<div class="ibox">
|
||||
<div class="ibox-title">
|
||||
<h5>普通弹出层</h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<p>通过调用<code>$.modal.open()</code>实现。 </p>
|
||||
<button type="button" class="btn btn-primary" id="button-open-1">默认</button>
|
||||
<button type="button" class="btn btn-success" id="button-open-2">设置宽高</button>
|
||||
<button type="button" class="btn btn-warning" id="button-open-3">回调函数</button>
|
||||
<button type="button" class="btn btn-danger" id="button-open-4">自定义选项</button>
|
||||
<button type="button" class="btn btn-primary" id="button-open-5">全屏弹出</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-6">
|
||||
<div class="ibox">
|
||||
<div class="ibox-title">
|
||||
<h5>选卡页方式</h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<p>通过调用<code>$.modal.openTab()</code>实现。 </p>
|
||||
<button type="button" class="btn btn-primary" id="button-open-6">打开</button>
|
||||
<button type="button" class="btn btn-warning" id="button-open-7">关闭</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-6">
|
||||
<div class="ibox">
|
||||
<div class="ibox-title">
|
||||
<h5>其他内容</h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<p>通过调用<code>layer</code>实现。 </p>
|
||||
<button type="button" class="btn btn-primary" id="button-open-8">tab层</button>
|
||||
<button type="button" class="btn btn-primary" id="button-open-9">prompt层</button>
|
||||
<button type="button" class="btn btn-primary" id="button-open-10">捕获页</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-6">
|
||||
<div class="ibox">
|
||||
<div class="ibox-title">
|
||||
<h5>遮罩层</h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<p>通过调用<code>blockUI</code>实现。 </p>
|
||||
<button type="button" class="btn btn-primary" id="button-open-11">打开</button>
|
||||
<button type="button" class="btn btn-warning" id="button-open-12">关闭</button>
|
||||
<button type="button" class="btn btn-primary" id="button-open-13">layer遮罩</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-12">
|
||||
<div class="ibox">
|
||||
<div class="ibox-title">
|
||||
<label class="font-noraml">相关参数详细信息</label>
|
||||
<div><a href="http://doc.ruoyi.vip/#/standard/zjwd?id=layer" target="_blank">http://doc.ruoyi.vip/#/standard/zjwd?id=layer</a></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<th:block th:include="include :: footer" />
|
||||
<script type="text/javascript">
|
||||
var prefix = ctx + "demo/modal";
|
||||
|
||||
$("#button-confirm").click(function(){
|
||||
$.modal.confirm("确认要点击确定吗?", function() {
|
||||
$.modal.alert("ok");
|
||||
});
|
||||
})
|
||||
|
||||
$("#button-msgReload").click(function(){
|
||||
$.modal.msgReload("保存成功,正在刷新数据请稍后……", modal_status.SUCCESS);
|
||||
})
|
||||
|
||||
$("#button-open-1").click(function(){
|
||||
$.modal.open('添加用户', prefix + "/form");
|
||||
})
|
||||
|
||||
$("#button-open-2").click(function(){
|
||||
$.modal.open('添加用户', prefix + "/form", '900', '320');
|
||||
})
|
||||
|
||||
$("#button-open-3").click(function(){
|
||||
$.modal.open('添加用户', prefix + "/form", '900', '320', callback);
|
||||
})
|
||||
|
||||
$("#button-open-4").click(function(){
|
||||
var btn = ['<i class="fa fa-check"></i> 点我回调', '<i class="fa fa-close"></i> 点我关闭'];
|
||||
var options = {
|
||||
title: '添加用户',
|
||||
width: "900",
|
||||
height: "320",
|
||||
url: prefix + "/form",
|
||||
btn: btn,
|
||||
callBack: doSubmit
|
||||
};
|
||||
$.modal.openOptions(options);
|
||||
})
|
||||
|
||||
function doSubmit(index, layero) {
|
||||
alert("进入了自定义选项提交方法");
|
||||
}
|
||||
|
||||
function callback(index, layero) {
|
||||
alert("进入了回调函数提交方法");
|
||||
}
|
||||
|
||||
$("#button-open-5").click(function(){
|
||||
$.modal.openFull('添加用户', prefix + "/form");
|
||||
})
|
||||
|
||||
$("#button-open-6").click(function(){
|
||||
$.modal.openTab('添加用户', prefix + "/form");
|
||||
})
|
||||
|
||||
$("#button-open-7").click(function(){
|
||||
$.modal.closeTab();
|
||||
})
|
||||
|
||||
$("#button-open-8").click(function(){
|
||||
//tab层
|
||||
layer.tab({
|
||||
area: ['600px', '300px'],
|
||||
tab: [{
|
||||
title: 'TAB1',
|
||||
content: '内容1'
|
||||
},
|
||||
{
|
||||
title: 'TAB2',
|
||||
content: '内容2'
|
||||
},
|
||||
{
|
||||
title: 'TAB3',
|
||||
content: '内容3'
|
||||
}]
|
||||
});
|
||||
})
|
||||
|
||||
$("#button-open-9").click(function(){
|
||||
layer.prompt({title: '输入任何口令，并确认', formType: 1}, function(pass, index){
|
||||
layer.close(index);
|
||||
layer.prompt({title: '随便写点啥，并确认', formType: 2}, function(text, index){
|
||||
layer.close(index);
|
||||
layer.msg('演示完毕！您的口令：'+ pass +'<br>您最后写下了：'+text);
|
||||
});
|
||||
});
|
||||
})
|
||||
|
||||
$("#button-open-10").click(function(){
|
||||
layer.open({
|
||||
type: 1,
|
||||
shade: false,
|
||||
title: false, //不显示标题
|
||||
content: $('#test'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
|
||||
cancel: function(){
|
||||
layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', {time: 5000, icon:6});
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
$("#button-open-11").click(function(){
|
||||
$.modal.loading("数据加载中");
|
||||
})
|
||||
|
||||
$("#button-open-12").click(function(){
|
||||
$.modal.closeLoading();
|
||||
})
|
||||
|
||||
$("#button-open-13").click(function(){
|
||||
layer.load(0, {shade: false}); // 0代表加载的风格，支持0-2
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<th:block th:include="include :: header('弹层表格')" />
|
||||
</head>
|
||||
<body class="gray-bg">
|
||||
<div class="wrapper wrapper-content fadeInRight">
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="ibox">
|
||||
<div class="ibox-title">
|
||||
<h5>弹层框</h5>
|
||||
</div>
|
||||
<div class="ibox-content" id="test">
|
||||
<p>弹出复选框表格及单选框表格（点击提交后得到数据）。 </p>
|
||||
<button type="button" class="btn btn-primary" onclick="selectCheckUser()">弹出表格（复选框）</button>
|
||||
<button type="button" class="btn btn-success" onclick="selectRadioUser()">弹出表格（单选框）</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12">
|
||||
<div class="ibox">
|
||||
<div class="ibox-title">
|
||||
<h5>弹层框</h5>
|
||||
</div>
|
||||
<div class="ibox-content" id="test">
|
||||
<p>弹出复选框表格及单选框表格（点击提交后得到数据并回显到父窗体）。 </p>
|
||||
<button type="button" class="btn btn-info" onclick="selectUsersToParent()">弹出表格（复选框）</button>
|
||||
<p id="userids"> </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<th:block th:include="include :: footer" />
|
||||
<script type="text/javascript">
|
||||
var prefix = ctx + "demo/modal";
|
||||
|
||||
function selectCheckUser(){
|
||||
$.modal.open("选择用户", prefix + "/check");
|
||||
}
|
||||
|
||||
function selectRadioUser(){
|
||||
$.modal.open("选择用户", prefix + "/radio");
|
||||
}
|
||||
|
||||
function selectUsersToParent(){
|
||||
$.modal.open("选择用户", prefix + "/parent");
|
||||
}
|
||||
|
||||
function selectUsers(){
|
||||
alert(1);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
|
||||
<head>
|
||||
<th:block th:include="include :: header('check表格页')" />
|
||||
</head>
|
||||
<body class="gray-bg">
|
||||
<div class="container-div">
|
||||
<div class="row">
|
||||
<div class="col-sm-12 select-table table-striped">
|
||||
<table id="bootstrap-table" data-mobile-responsive="true"></table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div th:include="include :: footer"></div>
|
||||
<script th:inline="javascript">
|
||||
var prefix = ctx + "demo/table";
|
||||
var datas = [[${@dict.getType('sys_normal_disable')}]];
|
||||
|
||||
$(function() {
|
||||
var options = {
|
||||
url: prefix + "/list",
|
||||
showSearch: false,
|
||||
showRefresh: false,
|
||||
showToggle: false,
|
||||
showColumns: false,
|
||||
columns: [{
|
||||
checkbox: true
|
||||
},
|
||||
{
|
||||
field : 'userId',
|
||||
title : '用户ID'
|
||||
},
|
||||
{
|
||||
field : 'userCode',
|
||||
title : '用户编号'
|
||||
},
|
||||
{
|
||||
field : 'userName',
|
||||
title : '用户姓名'
|
||||
},
|
||||
{
|
||||
field : 'userPhone',
|
||||
title : '用户手机'
|
||||
},
|
||||
{
|
||||
field : 'userEmail',
|
||||
title : '用户邮箱'
|
||||
},
|
||||
{
|
||||
field : 'userBalance',
|
||||
title : '用户余额'
|
||||
},
|
||||
{
|
||||
field: 'status',
|
||||
title: '用户状态',
|
||||
align: 'center',
|
||||
formatter: function(value, row, index) {
|
||||
return $.table.selectDictLabel(datas, value);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
formatter: function(value, row, index) {
|
||||
var actions = [];
|
||||
actions.push('<a class="btn btn-success btn-xs" href="#"><i class="fa fa-edit"></i>编辑</a> ');
|
||||
actions.push('<a class="btn btn-danger btn-xs" href="#"><i class="fa fa-remove"></i>删除</a>');
|
||||
return actions.join('');
|
||||
}
|
||||
}]
|
||||
};
|
||||
$.table.init(options);
|
||||
});
|
||||
|
||||
/* 添加用户-选择用户-提交 */
|
||||
function submitHandler() {
|
||||
var rows = $.table.selectFirstColumns();
|
||||
if (rows.length == 0) {
|
||||
$.modal.alertWarning("请至少选择一条记录");
|
||||
return;
|
||||
}
|
||||
alert(rows.join());
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
|
||||
<head>
|
||||
<th:block th:include="include :: header('表格传值给父页面')" />
|
||||
</head>
|
||||
<body class="gray-bg">
|
||||
<div class="container-div">
|
||||
<div class="row">
|
||||
<div class="col-sm-12 select-table table-striped">
|
||||
<table id="bootstrap-table" data-mobile-responsive="true"></table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div th:include="include :: footer"></div>
|
||||
<script th:inline="javascript">
|
||||
var prefix = ctx + "demo/table";
|
||||
var datas = [[${@dict.getType('sys_normal_disable')}]];
|
||||
|
||||
$(function() {
|
||||
var options = {
|
||||
url: prefix + "/list",
|
||||
showSearch: false,
|
||||
showRefresh: false,
|
||||
showToggle: false,
|
||||
showColumns: false,
|
||||
columns: [{
|
||||
checkbox: true
|
||||
},
|
||||
{
|
||||
field : 'userId',
|
||||
title : '用户ID'
|
||||
},
|
||||
{
|
||||
field : 'userCode',
|
||||
title : '用户编号'
|
||||
},
|
||||
{
|
||||
field : 'userName',
|
||||
title : '用户姓名'
|
||||
},
|
||||
{
|
||||
field : 'userPhone',
|
||||
title : '用户手机'
|
||||
},
|
||||
{
|
||||
field : 'userEmail',
|
||||
title : '用户邮箱'
|
||||
},
|
||||
{
|
||||
field : 'userBalance',
|
||||
title : '用户余额'
|
||||
},
|
||||
{
|
||||
field: 'status',
|
||||
title: '用户状态',
|
||||
align: 'center',
|
||||
formatter: function(value, row, index) {
|
||||
return $.table.selectDictLabel(datas, value);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
formatter: function(value, row, index) {
|
||||
var actions = [];
|
||||
actions.push('<a class="btn btn-success btn-xs" href="#"><i class="fa fa-edit"></i>编辑</a> ');
|
||||
actions.push('<a class="btn btn-danger btn-xs" href="#"><i class="fa fa-remove"></i>删除</a>');
|
||||
return actions.join('');
|
||||
}
|
||||
}]
|
||||
};
|
||||
$.table.init(options);
|
||||
});
|
||||
|
||||
/* 添加用户-选择用户-提交 */
|
||||
function submitHandler(index, layero) {
|
||||
var rows = $.table.selectFirstColumns();
|
||||
if (rows.length == 0) {
|
||||
$.modal.alertWarning("请至少选择一条记录");
|
||||
return;
|
||||
}
|
||||
$.modal.close();
|
||||
// 父页面的方法
|
||||
// parent.selectUsers();
|
||||
// 父页面的变量
|
||||
parent.$('#userids').html(rows.join());
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
|
||||
<head>
|
||||
<th:block th:include="include :: header('radio表格页')" />
|
||||
</head>
|
||||
<body class="gray-bg">
|
||||
<div class="container-div">
|
||||
<div class="row">
|
||||
<div class="col-sm-12 select-table table-striped">
|
||||
<table id="bootstrap-table" data-mobile-responsive="true"></table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div th:include="include :: footer"></div>
|
||||
<script th:inline="javascript">
|
||||
var prefix = ctx + "demo/table";
|
||||
var datas = [[${@dict.getType('sys_normal_disable')}]];
|
||||
|
||||
$(function() {
|
||||
var options = {
|
||||
url: prefix + "/list",
|
||||
showSearch: false,
|
||||
showRefresh: false,
|
||||
showToggle: false,
|
||||
showColumns: false,
|
||||
columns: [{
|
||||
radio: true
|
||||
},
|
||||
{
|
||||
field : 'userId',
|
||||
title : '用户ID'
|
||||
},
|
||||
{
|
||||
field : 'userCode',
|
||||
title : '用户编号'
|
||||
},
|
||||
{
|
||||
field : 'userName',
|
||||
title : '用户姓名'
|
||||
},
|
||||
{
|
||||
field : 'userPhone',
|
||||
title : '用户手机'
|
||||
},
|
||||
{
|
||||
field : 'userEmail',
|
||||
title : '用户邮箱'
|
||||
},
|
||||
{
|
||||
field : 'userBalance',
|
||||
title : '用户余额'
|
||||
},
|
||||
{
|
||||
field: 'status',
|
||||
title: '用户状态',
|
||||
align: 'center',
|
||||
formatter: function(value, row, index) {
|
||||
return $.table.selectDictLabel(datas, value);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
formatter: function(value, row, index) {
|
||||
var actions = [];
|
||||
actions.push('<a class="btn btn-success btn-xs" href="#"><i class="fa fa-edit"></i>编辑</a> ');
|
||||
actions.push('<a class="btn btn-danger btn-xs" href="#"><i class="fa fa-remove"></i>删除</a>');
|
||||
return actions.join('');
|
||||
}
|
||||
}]
|
||||
};
|
||||
$.table.init(options);
|
||||
});
|
||||
|
||||
/* 添加用户-选择用户-提交 */
|
||||
function submitHandler() {
|
||||
var rows = $.table.selectFirstColumns();
|
||||
if (rows.length == 0) {
|
||||
$.modal.alertWarning("请至少选择一条记录");
|
||||
return;
|
||||
}
|
||||
alert(rows.join());
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
|
||||
<head>
|
||||
<th:block th:include="include :: header('新增用户')" />
|
||||
</head>
|
||||
<body class="white-bg">
|
||||
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
|
||||
<form class="form-horizontal m" id="form-user-add">
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">用户编号：</label>
|
||||
<div class="col-sm-8">
|
||||
<input class="form-control" type="text" name="userCode" id="userCode" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label ">用户姓名：</label>
|
||||
<div class="col-sm-8">
|
||||
<input class="form-control" type="text" name="userName" id="userName" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">用户性别：</label>
|
||||
<div class="col-sm-8">
|
||||
<div class="input-group" style="width: 100%">
|
||||
<select name="userSex" class="form-control m-b" th:with="type=${@dict.getType('sys_user_sex')}">
|
||||
<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">用户手机：</label>
|
||||
<div class="col-sm-8">
|
||||
<input class="form-control" type="text" name="userPhone" id="userPhone">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">用户邮箱：</label>
|
||||
<div class="col-sm-8">
|
||||
<input class="form-control" type="text" name="userEmail" id="userEmail">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">用户状态：</label>
|
||||
<div class="col-sm-8">
|
||||
<div class="radio-box" th:each="dict : ${@dict.getType('sys_normal_disable')}">
|
||||
<input type="radio" th:id="${dict.dictCode}" name="status" th:value="${dict.dictValue}" th:checked="${dict.isDefault == 'Y' ? true : false}">
|
||||
<label th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<th:block th:include="include :: footer" />
|
||||
<script type="text/javascript">
|
||||
var prefix = ctx + "demo/operate";
|
||||
|
||||
$("#form-user-add").validate({
|
||||
onkeyup: false,
|
||||
rules:{
|
||||
userPhone:{
|
||||
isPhone:true
|
||||
},
|
||||
userEmail:{
|
||||
email:true
|
||||
},
|
||||
},
|
||||
focusCleanup: true
|
||||
});
|
||||
|
||||
function submitHandler() {
|
||||
if ($.validate.form()) {
|
||||
$.operate.save(prefix + "/add", $('#form-user-add').serialize());
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
|
||||
<head>
|
||||
<th:block th:include="include :: header('用户详细')" />
|
||||
</head>
|
||||
<body class="white-bg">
|
||||
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
|
||||
<form class="form-horizontal m" id="form-user-edit">
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">用户编号：</label>
|
||||
<div class="form-control-static" th:text="${user.userCode}"></div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label ">用户姓名：</label>
|
||||
<div class="col-sm-8">
|
||||
<div class="form-control-static" th:text="${user.userName}"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">用户性别：</label>
|
||||
<div class="col-sm-8">
|
||||
<div class="form-control-static" th:text="${@dict.getLabel('sys_user_sex', user.status)}"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">用户手机：</label>
|
||||
<div class="col-sm-8">
|
||||
<div class="form-control-static" th:text="${user.userPhone}"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">用户邮箱：</label>
|
||||
<div class="col-sm-8">
|
||||
<div class="form-control-static" th:text="${user.userEmail}"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">用户状态：</label>
|
||||
<div class="col-sm-8">
|
||||
<div class="form-control-static" th:text="${@dict.getLabel('sys_normal_disable', user.status)}"></div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<th:block th:include="include :: footer" />
|
||||
<script type="text/javascript">
|
||||
var prefix = ctx + "demo/operate";
|
||||
|
||||
$("#form-user-add").validate({
|
||||
onkeyup: false,
|
||||
rules:{
|
||||
userPhone:{
|
||||
isPhone:true
|
||||
},
|
||||
userEmail:{
|
||||
email:true
|
||||
},
|
||||
},
|
||||
focusCleanup: true
|
||||
});
|
||||
|
||||
function submitHandler() {
|
||||
if ($.validate.form()) {
|
||||
$.operate.save(prefix + "/edit", $('#form-user-edit').serialize());
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
|
||||
<head>
|
||||
<th:block th:include="include :: header('修改用户')" />
|
||||
</head>
|
||||
<body class="white-bg">
|
||||
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
|
||||
<form class="form-horizontal m" id="form-user-edit" th:object="${user}">
|
||||
<input name="userId" type="hidden" th:field="*{userId}" />
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">用户编号：</label>
|
||||
<div class="col-sm-8">
|
||||
<input class="form-control" type="text" name="userCode" id="userCode" th:field="*{userCode}" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label ">用户姓名：</label>
|
||||
<div class="col-sm-8">
|
||||
<input class="form-control" type="text" name="userName" id="userName" th:field="*{userName}" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">用户性别：</label>
|
||||
<div class="col-sm-8">
|
||||
<div class="input-group" style="width: 100%">
|
||||
<select name="userSex" class="form-control m-b" th:with="type=${@dict.getType('sys_user_sex')}">
|
||||
<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="*{userSex}"></option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">用户手机：</label>
|
||||
<div class="col-sm-8">
|
||||
<input class="form-control" type="text" name="userPhone" th:field="*{userPhone}" id="userPhone">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">用户邮箱：</label>
|
||||
<div class="col-sm-8">
|
||||
<input class="form-control" type="text" name="userEmail" th:field="*{userEmail}" id="userEmail">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">用户状态：</label>
|
||||
<div class="col-sm-8">
|
||||
<div class="radio-box" th:each="dict : ${@dict.getType('sys_normal_disable')}">
|
||||
<input type="radio" th:id="${dict.dictCode}" name="status" th:value="${dict.dictValue}" th:field="*{status}">
|
||||
<label th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<th:block th:include="include :: footer" />
|
||||
<script type="text/javascript">
|
||||
var prefix = ctx + "demo/operate";
|
||||
|
||||
$("#form-user-add").validate({
|
||||
onkeyup: false,
|
||||
rules:{
|
||||
userPhone:{
|
||||
isPhone:true
|
||||
},
|
||||
userEmail:{
|
||||
email:true
|
||||
},
|
||||
},
|
||||
focusCleanup: true
|
||||
});
|
||||
|
||||
function submitHandler() {
|
||||
if ($.validate.form()) {
|
||||
$.operate.save(prefix + "/edit", $('#form-user-edit').serialize());
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
|
||||
<head>
|
||||
<th:block th:include="include :: header('其他操作')" />
|
||||
</head>
|
||||
<body class="gray-bg">
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,123 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
|
||||
<head>
|
||||
<th:block th:include="include :: header('其他操作')" />
|
||||
</head>
|
||||
<body class="gray-bg">
|
||||
<div class="container-div">
|
||||
<div class="btn-group-sm" id="toolbar" role="group">
|
||||
<a class="btn btn-success" onclick="$.operate.add()">
|
||||
<i class="fa fa-plus"></i> 新增
|
||||
</a>
|
||||
<a class="btn btn-primary btn-edit disabled" onclick="$.operate.edit()">
|
||||
<i class="fa fa-edit"></i> 修改
|
||||
</a>
|
||||
<a class="btn btn-danger btn-del disabled" onclick="$.operate.removeAll()">
|
||||
<i class="fa fa-remove"></i> 删除
|
||||
</a>
|
||||
<a class="btn btn-info" onclick="$.table.importExcel()">
|
||||
<i class="fa fa-upload"></i> 导入
|
||||
</a>
|
||||
<a class="btn btn-warning" onclick="$.table.exportExcel()">
|
||||
<i class="fa fa-download"></i> 导出
|
||||
</a>
|
||||
<a class="btn btn-info btn-detail disabled" onclick="$.operate.detail()">
|
||||
<i class="fa fa-search"></i> 详细
|
||||
</a>
|
||||
<a class="btn btn-danger" onclick="$.operate.clean()">
|
||||
<i class="fa fa-trash"></i> 清空
|
||||
</a>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 select-table table-striped">
|
||||
<table id="bootstrap-table" data-mobile-responsive="true"></table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div th:include="include :: footer"></div>
|
||||
<script th:inline="javascript">
|
||||
var prefix = ctx + "demo/operate";
|
||||
var datas = [[${@dict.getType('sys_normal_disable')}]];
|
||||
|
||||
$(function() {
|
||||
var options = {
|
||||
url: prefix + "/list",
|
||||
createUrl: prefix + "/add",
|
||||
updateUrl: prefix + "/edit/{id}",
|
||||
removeUrl: prefix + "/remove",
|
||||
exportUrl: prefix + "/export",
|
||||
importUrl: prefix + "/importData",
|
||||
importTemplateUrl: prefix + "/importTemplate",
|
||||
detailUrl: prefix + "/detail/{id}",
|
||||
cleanUrl: prefix + "/clean",
|
||||
showSearch: false,
|
||||
showRefresh: false,
|
||||
showToggle: false,
|
||||
showColumns: false,
|
||||
search: true,
|
||||
modalName: "用户",
|
||||
columns: [{
|
||||
checkbox: true
|
||||
},
|
||||
{
|
||||
field : 'userId',
|
||||
title : '用户ID'
|
||||
},
|
||||
{
|
||||
field : 'userCode',
|
||||
title : '用户编号'
|
||||
},
|
||||
{
|
||||
field : 'userName',
|
||||
title : '用户姓名'
|
||||
},
|
||||
{
|
||||
field : 'userPhone',
|
||||
title : '用户手机'
|
||||
},
|
||||
{
|
||||
field : 'userEmail',
|
||||
title : '用户邮箱'
|
||||
},
|
||||
{
|
||||
field : 'userBalance',
|
||||
title : '用户余额'
|
||||
},
|
||||
{
|
||||
field: 'status',
|
||||
title: '用户状态',
|
||||
align: 'center',
|
||||
formatter: function(value, row, index) {
|
||||
return $.table.selectDictLabel(datas, value);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
formatter: function(value, row, index) {
|
||||
var actions = [];
|
||||
actions.push('<a class="btn btn-success btn-xs" href="#" onclick="$.operate.edit(\'' + row.userId + '\')"><i class="fa fa-edit"></i>编辑</a> ');
|
||||
actions.push('<a class="btn btn-info btn-xs" href="#" onclick="$.operate.detail(\'' + row.userId + '\')"><i class="fa fa-search"></i>详细</a> ');
|
||||
actions.push('<a class="btn btn-danger btn-xs" href="#" onclick="$.operate.remove(\'' + row.userId + '\')"><i class="fa fa-remove"></i>删除</a>');
|
||||
return actions.join('');
|
||||
}
|
||||
}]
|
||||
};
|
||||
$.table.init(options);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
<!-- 导入区域 -->
|
||||
<form id="importForm" enctype="multipart/form-data" class="mt20 mb10" style="display: none;">
|
||||
<div class="col-xs-offset-1">
|
||||
<input type="file" id="file" name="file"/>
|
||||
<div class="mt10 pt5">
|
||||
<input type="checkbox" id="updateSupport" name="updateSupport" title="如果登录账户已经存在，更新这条数据。"> 是否更新已经存在的用户数据
|
||||
<a onclick="$.table.importTemplate()" class="btn btn-default btn-xs"><i class="fa fa-file-excel-o"></i> 下载模板</a>
|
||||
</div>
|
||||
<font color="red" class="pull-left mt10">
|
||||
提示：仅允许导入“xls”或“xlsx”格式文件！
|
||||
</font>
|
||||
</div>
|
||||
</form>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
|
||||
<head>
|
||||
<th:block th:include="include :: header('点击按钮加载表格')" />
|
||||
</head>
|
||||
<body class="gray-bg">
|
||||
<div class="container-div">
|
||||
<div class="row">
|
||||
<div class="col-sm-12 search-collapse">
|
||||
<form id="ordinary-form">
|
||||
<div class="select-list">
|
||||
<ul>
|
||||
<li>
|
||||
用户名称：<input type="text" name="userName"/>
|
||||
</li>
|
||||
<li>
|
||||
<a class="btn btn-primary btn-rounded btn-sm" onclick="query()"><i class="fa fa-search"></i> 搜索</a>
|
||||
<a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i> 重置</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-12 select-table table-striped">
|
||||
<table id="bootstrap-table" data-mobile-responsive="true"></table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div th:include="include :: footer"></div>
|
||||
<script th:inline="javascript">
|
||||
var prefix = ctx + "demo/table";
|
||||
var datas = [[${@dict.getType('sys_normal_disable')}]];
|
||||
|
||||
function query() {
|
||||
var options = {
|
||||
url: prefix + "/list",
|
||||
showSearch: false,
|
||||
showRefresh: false,
|
||||
showToggle: false,
|
||||
showColumns: false,
|
||||
columns: [{
|
||||
checkbox: true
|
||||
},
|
||||
{
|
||||
field : 'userId',
|
||||
title : '用户ID'
|
||||
},
|
||||
{
|
||||
field : 'userCode',
|
||||
title : '用户编号'
|
||||
},
|
||||
{
|
||||
field : 'userName',
|
||||
title : '用户姓名'
|
||||
},
|
||||
{
|
||||
field : 'userPhone',
|
||||
title : '用户手机'
|
||||
},
|
||||
{
|
||||
field : 'userEmail',
|
||||
title : '用户邮箱'
|
||||
},
|
||||
{
|
||||
field : 'userBalance',
|
||||
title : '用户余额'
|
||||
},
|
||||
{
|
||||
field: 'status',
|
||||
title: '用户状态',
|
||||
align: 'center',
|
||||
formatter: function(value, row, index) {
|
||||
return $.table.selectDictLabel(datas, value);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
formatter: function(value, row, index) {
|
||||
var actions = [];
|
||||
actions.push('<a class="btn btn-success btn-xs" href="#"><i class="fa fa-edit"></i>编辑</a> ');
|
||||
actions.push('<a class="btn btn-danger btn-xs" href="#"><i class="fa fa-remove"></i>删除</a>');
|
||||
return actions.join('');
|
||||
}
|
||||
}]
|
||||
};
|
||||
$.table.init(options);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
|
||||
<head>
|
||||
<th:block th:include="include :: header('跳转至指定页')" />
|
||||
</head>
|
||||
<body class="gray-bg">
|
||||
<div class="container-div">
|
||||
<div class="row">
|
||||
<div class="col-sm-12 select-table table-striped">
|
||||
<table id="bootstrap-table" data-mobile-responsive="true"></table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div th:include="include :: footer"></div>
|
||||
<script th:inline="javascript">
|
||||
var prefix = ctx + "demo/table";
|
||||
var datas = [[${@dict.getType('sys_normal_disable')}]];
|
||||
|
||||
$(function() {
|
||||
var options = {
|
||||
url: prefix + "/list",
|
||||
showSearch: false,
|
||||
showRefresh: false,
|
||||
showToggle: false,
|
||||
showColumns: false,
|
||||
detailView: true,
|
||||
detailFormatter: detailFormatter,
|
||||
columns: [{
|
||||
checkbox: true
|
||||
},
|
||||
{
|
||||
field : 'userId',
|
||||
title : '用户ID'
|
||||
},
|
||||
{
|
||||
field : 'userCode',
|
||||
title : '用户编号'
|
||||
},
|
||||
{
|
||||
field : 'userName',
|
||||
title : '用户姓名'
|
||||
},
|
||||
{
|
||||
field : 'userPhone',
|
||||
title : '用户手机'
|
||||
},
|
||||
{
|
||||
field : 'userEmail',
|
||||
title : '用户邮箱'
|
||||
},
|
||||
{
|
||||
field : 'userBalance',
|
||||
title : '用户余额'
|
||||
},
|
||||
{
|
||||
field: 'status',
|
||||
title: '用户状态',
|
||||
align: 'center',
|
||||
formatter: function(value, row, index) {
|
||||
return $.table.selectDictLabel(datas, value);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
formatter: function(value, row, index) {
|
||||
var actions = [];
|
||||
actions.push('<a class="btn btn-success btn-xs" href="#"><i class="fa fa-edit"></i>编辑</a> ');
|
||||
actions.push('<a class="btn btn-danger btn-xs" href="#"><i class="fa fa-remove"></i>删除</a>');
|
||||
return actions.join('');
|
||||
}
|
||||
}]
|
||||
};
|
||||
$.table.init(options);
|
||||
});
|
||||
|
||||
function detailFormatter(index, row) {
|
||||
var html = [];
|
||||
$.each(row, function(key, value) {
|
||||
html.push('<p><b>' + key + ':</b> ' + value + '</p>');
|
||||
});
|
||||
return html.join('');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,107 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
|
||||
<head>
|
||||
<th:block th:include="include :: header('自定义触发事件')" />
|
||||
</head>
|
||||
<body class="gray-bg">
|
||||
<div class="container-div">
|
||||
<div class="row">
|
||||
<div class="col-sm-12 select-table table-striped">
|
||||
<p class="select-title">自定义触发事件（点击某行/双击某行/单击某格/双击某格/服务器发送数据前触发/数据被加载时触发）</p>
|
||||
<table id="bootstrap-table" data-mobile-responsive="true"></table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div th:include="include :: footer"></div>
|
||||
<script th:inline="javascript">
|
||||
var prefix = ctx + "demo/table";
|
||||
var datas = [[${@dict.getType('sys_normal_disable')}]];
|
||||
|
||||
$(function() {
|
||||
var options = {
|
||||
url: prefix + "/list",
|
||||
showSearch: false,
|
||||
showRefresh: false,
|
||||
showToggle: false,
|
||||
showColumns: false,
|
||||
onClickRow: onClickRow,
|
||||
onDblClickRow: onDblClickRow,
|
||||
onClickCell: onClickCell,
|
||||
onDblClickCell: onDblClickCell,
|
||||
responseHandler: responseHandler,
|
||||
onLoadSuccess: onLoadSuccess,
|
||||
columns: [{
|
||||
checkbox: true
|
||||
},
|
||||
{
|
||||
field : 'userId',
|
||||
title : '用户ID'
|
||||
},
|
||||
{
|
||||
field : 'userCode',
|
||||
title : '用户编号'
|
||||
},
|
||||
{
|
||||
field : 'userName',
|
||||
title : '用户姓名'
|
||||
},
|
||||
{
|
||||
field : 'userPhone',
|
||||
title : '用户手机'
|
||||
},
|
||||
{
|
||||
field : 'userEmail',
|
||||
title : '用户邮箱'
|
||||
},
|
||||
{
|
||||
field : 'userBalance',
|
||||
title : '用户余额'
|
||||
},
|
||||
{
|
||||
field: 'status',
|
||||
title: '用户状态',
|
||||
align: 'center',
|
||||
formatter: function(value, row, index) {
|
||||
return $.table.selectDictLabel(datas, value);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
formatter: function(value, row, index) {
|
||||
var actions = [];
|
||||
actions.push('<a class="btn btn-success btn-xs" href="#"><i class="fa fa-edit"></i>编辑</a> ');
|
||||
actions.push('<a class="btn btn-danger btn-xs" href="#"><i class="fa fa-remove"></i>删除</a>');
|
||||
return actions.join('');
|
||||
}
|
||||
}]
|
||||
};
|
||||
$.table.init(options);
|
||||
});
|
||||
|
||||
function onClickRow(row, $element){
|
||||
alert("单击行userId：" + row.userId + " userName：" + row.userName);
|
||||
}
|
||||
|
||||
function onDblClickRow(row, $element){
|
||||
alert("双击行userId：" + row.userId + " userName：" + row.userName);
|
||||
}
|
||||
|
||||
function onClickCell(field, value, row, $element){
|
||||
alert("单击格name：" + field + " value：" + value);
|
||||
}
|
||||
|
||||
function onDblClickCell(field, value, row, $element){
|
||||
alert("双击格name：" + field + " value：" + value);
|
||||
}
|
||||
|
||||
function responseHandler(res){
|
||||
alert("请求获取数据后处理回调函数");
|
||||
}
|
||||
|
||||
function onLoadSuccess(data){
|
||||
alert("当所有数据被加载时触发");
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
|
||||
<head>
|
||||
<th:block th:include="include :: header('导出')" />
|
||||
</head>
|
||||
<body class="gray-bg">
|
||||
<div class="container-div">
|
||||
<div class="row">
|
||||
<div class="col-sm-12 select-table table-striped">
|
||||
<table id="bootstrap-table" data-mobile-responsive="true"></table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div th:include="include :: footer"></div>
|
||||
<script th:inline="javascript">
|
||||
var prefix = ctx + "demo/table";
|
||||
var datas = [[${@dict.getType('sys_normal_disable')}]];
|
||||
|
||||
$(function() {
|
||||
var options = {
|
||||
url: prefix + "/list",
|
||||
showSearch: false,
|
||||
showRefresh: false,
|
||||
showToggle: false,
|
||||
showColumns: false,
|
||||
showExport: true,
|
||||
exportOptions: {
|
||||
ignoreColumn: [0, 8] //忽略第一列和最后一列
|
||||
},
|
||||
columns: [{
|
||||
checkbox: true
|
||||
},
|
||||
{
|
||||
field : 'userId',
|
||||
title : '用户ID'
|
||||
},
|
||||
{
|
||||
field : 'userCode',
|
||||
title : '用户编号'
|
||||
},
|
||||
{
|
||||
field : 'userName',
|
||||
title : '用户姓名'
|
||||
},
|
||||
{
|
||||
field : 'userPhone',
|
||||
title : '用户手机'
|
||||
},
|
||||
{
|
||||
field : 'userEmail',
|
||||
title : '用户邮箱'
|
||||
},
|
||||
{
|
||||
field : 'userBalance',
|
||||
title : '用户余额'
|
||||
},
|
||||
{
|
||||
field: 'status',
|
||||
title: '用户状态',
|
||||
align: 'center',
|
||||
formatter: function(value, row, index) {
|
||||
return $.table.selectDictLabel(datas, value);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
formatter: function(value, row, index) {
|
||||
var actions = [];
|
||||
actions.push('<a class="btn btn-success btn-xs" href="#"><i class="fa fa-edit"></i>编辑</a> ');
|
||||
actions.push('<a class="btn btn-danger btn-xs" href="#"><i class="fa fa-remove"></i>删除</a>');
|
||||
return actions.join('');
|
||||
}
|
||||
}]
|
||||
};
|
||||
$.table.init(options);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,143 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
|
||||
<head>
|
||||
<th:block th:include="include :: header('冻结列')" />
|
||||
</head>
|
||||
<body class="gray-bg">
|
||||
<div class="container-div">
|
||||
<div class="row">
|
||||
<div class="btn-group-sm" id="toolbar" role="group">
|
||||
<a class="btn btn-success">
|
||||
<i class="fa fa-plus"></i> 新增
|
||||
</a>
|
||||
<a class="btn btn-primary btn-edit disabled">
|
||||
<i class="fa fa-edit"></i> 修改
|
||||
</a>
|
||||
<a class="btn btn-danger btn-del disabled">
|
||||
<i class="fa fa-remove"></i> 删除
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-sm-12 select-table table-striped">
|
||||
<table id="bootstrap-table" data-mobile-responsive="true"></table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div th:include="include :: footer"></div>
|
||||
<script th:inline="javascript">
|
||||
var prefix = ctx + "demo/table";
|
||||
var datas = [[${@dict.getType('sys_normal_disable')}]];
|
||||
|
||||
$(function() {
|
||||
var options = {
|
||||
url: prefix + "/list",
|
||||
showSearch: false,
|
||||
showRefresh: false,
|
||||
showToggle: false,
|
||||
showColumns: false,
|
||||
fixedColumns: true,
|
||||
fixedNumber: 3,
|
||||
columns: [{
|
||||
checkbox: true
|
||||
},
|
||||
{
|
||||
field : 'userId',
|
||||
title : '用户ID'
|
||||
},
|
||||
{
|
||||
field : 'userCode',
|
||||
title : '用户编号'
|
||||
},
|
||||
{
|
||||
field : 'userName',
|
||||
title : '用户姓名'
|
||||
},
|
||||
{
|
||||
field : 'userPhone',
|
||||
title : '用户手机'
|
||||
},
|
||||
{
|
||||
field : 'userEmail',
|
||||
title : '用户邮箱'
|
||||
},
|
||||
{
|
||||
field : 'userBalance',
|
||||
title : '用户余额'
|
||||
},
|
||||
{
|
||||
field: 'status',
|
||||
title: '用户状态',
|
||||
align: 'center',
|
||||
formatter: function(value, row, index) {
|
||||
return $.table.selectDictLabel(datas, value);
|
||||
}
|
||||
},
|
||||
{
|
||||
field : 'userBalance',
|
||||
title : '测试1'
|
||||
},
|
||||
{
|
||||
field : 'userBalance',
|
||||
title : '测试2'
|
||||
},
|
||||
{
|
||||
field : 'userBalance',
|
||||
title : '测试3'
|
||||
},
|
||||
{
|
||||
field : 'userBalance',
|
||||
title : '测试4'
|
||||
},
|
||||
{
|
||||
field : 'userBalance',
|
||||
title : '测试5'
|
||||
},
|
||||
{
|
||||
field : 'userBalance',
|
||||
title : '测试6'
|
||||
},
|
||||
{
|
||||
field : 'userBalance',
|
||||
title : '测试7'
|
||||
},
|
||||
{
|
||||
field : 'userBalance',
|
||||
title : '测试8'
|
||||
},
|
||||
{
|
||||
field : 'userBalance',
|
||||
title : '测试9'
|
||||
},
|
||||
{
|
||||
field : 'userBalance',
|
||||
title : '测试10'
|
||||
},
|
||||
{
|
||||
field : 'userBalance',
|
||||
title : '测试11'
|
||||
},
|
||||
{
|
||||
field : 'userBalance',
|
||||
title : '测试12'
|
||||
},
|
||||
{
|
||||
field : 'userBalance',
|
||||
title : '测试13'
|
||||
},
|
||||
{
|
||||
field : 'userBalance',
|
||||
title : '测试14'
|
||||
},
|
||||
{
|
||||
field : 'userBalance',
|
||||
title : '测试15'
|
||||
},
|
||||
{
|
||||
field : 'userBalance',
|
||||
title : '测试16'
|
||||
}]
|
||||
};
|
||||
$.table.init(options);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
|
||||
<head>
|
||||
<th:block th:include="include :: header('表格数据汇总')" />
|
||||
</head>
|
||||
<body class="gray-bg">
|
||||
<div class="container-div">
|
||||
<div class="row">
|
||||
<div class="col-sm-12 select-table table-striped">
|
||||
<table id="bootstrap-table" data-mobile-responsive="true"></table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div th:include="include :: footer"></div>
|
||||
<script th:inline="javascript">
|
||||
var prefix = ctx + "demo/table";
|
||||
var datas = [[${@dict.getType('sys_normal_disable')}]];
|
||||
|
||||
$(function() {
|
||||
var options = {
|
||||
url: prefix + "/list",
|
||||
showFooter: true,
|
||||
showSearch: false,
|
||||
showRefresh: false,
|
||||
showToggle: false,
|
||||
showColumns: false,
|
||||
columns: [{
|
||||
checkbox: true
|
||||
},
|
||||
{
|
||||
field : 'userId',
|
||||
title : '用户ID'
|
||||
},
|
||||
{
|
||||
field : 'userCode',
|
||||
title : '用户编号'
|
||||
},
|
||||
{
|
||||
field : 'userName',
|
||||
title : '用户姓名'
|
||||
},
|
||||
{
|
||||
field : 'userPhone',
|
||||
title : '用户手机'
|
||||
},
|
||||
{
|
||||
field : 'userEmail',
|
||||
title : '用户邮箱'
|
||||
},
|
||||
{
|
||||
field : 'userBalance',
|
||||
title : '用户余额',
|
||||
footerFormatter:function (value) {
|
||||
var sumBalance = 0;
|
||||
for (var i in value) {
|
||||
sumBalance += parseFloat(value[i].userBalance);
|
||||
}
|
||||
return "总金额：" + sumBalance;
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'status',
|
||||
title: '用户状态',
|
||||
formatter: function(value, row, index) {
|
||||
return $.table.selectDictLabel(datas, value);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
formatter: function(value, row, index) {
|
||||
var actions = [];
|
||||
actions.push('<a class="btn btn-success btn-xs" href="#"><i class="fa fa-edit"></i>编辑</a> ');
|
||||
actions.push('<a class="btn btn-danger btn-xs" href="#"><i class="fa fa-remove"></i>删除</a>');
|
||||
return actions.join('');
|
||||
}
|
||||
}]
|
||||
};
|
||||
$.table.init(options);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
|
||||
<head>
|
||||
<th:block th:include="include :: header('组合表头')" />
|
||||
</head>
|
||||
<body class="gray-bg">
|
||||
<div class="container-div">
|
||||
<div class="row">
|
||||
<div class="col-sm-12 select-table table-bordered">
|
||||
<table id="bootstrap-table" data-mobile-responsive="true"></table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div th:include="include :: footer"></div>
|
||||
<script th:inline="javascript">
|
||||
var prefix = ctx + "demo/table";
|
||||
var datas = [[${@dict.getType('sys_normal_disable')}]];
|
||||
|
||||
$(function() {
|
||||
var options = {
|
||||
url: prefix + "/list",
|
||||
showSearch: false,
|
||||
showRefresh: false,
|
||||
showToggle: false,
|
||||
showColumns: false,
|
||||
columns : [
|
||||
[{
|
||||
title : '基本信息',
|
||||
align : 'center',
|
||||
colspan : 6
|
||||
}, {
|
||||
title : '其他信息',
|
||||
align : 'center',
|
||||
colspan : 3
|
||||
}
|
||||
],
|
||||
[{
|
||||
checkbox : true
|
||||
}, {
|
||||
field : 'userId',
|
||||
title : '用户ID'
|
||||
}, {
|
||||
field : 'userCode',
|
||||
title : '用户编号'
|
||||
}, {
|
||||
field : 'userName',
|
||||
title : '用户姓名'
|
||||
}, {
|
||||
field : 'userPhone',
|
||||
title : '用户手机'
|
||||
}, {
|
||||
field : 'userEmail',
|
||||
title : '用户邮箱'
|
||||
}, {
|
||||
field : 'userBalance',
|
||||
title : '用户余额'
|
||||
}, {
|
||||
field : 'status',
|
||||
title : '用户状态',
|
||||
formatter : function (value, row, index) {
|
||||
return $.table.selectDictLabel(datas, value);
|
||||
}
|
||||
}, {
|
||||
title : '操作',
|
||||
align : 'center',
|
||||
formatter : function (value, row, index) {
|
||||
var actions = [];
|
||||
actions.push('<a class="btn btn-success btn-xs" href="#"><i class="fa fa-edit"></i>编辑</a> ');
|
||||
actions.push('<a class="btn btn-danger btn-xs" href="#"><i class="fa fa-remove"></i>删除</a>');
|
||||
return actions.join('');
|
||||
}
|
||||
}
|
||||
]
|
||||
]
|
||||
};
|
||||
$.table.init(options);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
|
||||
<head>
|
||||
<th:block th:include="include :: header('跳转至指定页')" />
|
||||
</head>
|
||||
<body class="gray-bg">
|
||||
<div class="container-div">
|
||||
<div class="row">
|
||||
<div class="col-sm-12 select-table table-striped">
|
||||
<table id="bootstrap-table" data-mobile-responsive="true"></table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div th:include="include :: footer"></div>
|
||||
<script th:inline="javascript">
|
||||
var prefix = ctx + "demo/table";
|
||||
|
||||
$(function() {
|
||||
var options = {
|
||||
url: prefix + "/list",
|
||||
showSearch: false,
|
||||
showRefresh: false,
|
||||
showToggle: false,
|
||||
showColumns: false,
|
||||
columns: [{
|
||||
checkbox: true
|
||||
},
|
||||
{
|
||||
field : 'userId',
|
||||
title : '用户ID'
|
||||
},
|
||||
{
|
||||
field : 'userCode',
|
||||
title : '用户编号'
|
||||
},
|
||||
{
|
||||
field : 'userName',
|
||||
title : '用户姓名'
|
||||
},
|
||||
{
|
||||
title: '图片',
|
||||
formatter: function(value, row, index) {
|
||||
// 图片自由组合
|
||||
// 'img/profile.jpg' - 'http://ruoyi.vip/' 变成 http://ruoyi.vip/img/profile.jpg
|
||||
// 'ruoyi.png' - 'http://ruoyi.vip/' 变成 http://ruoyi.vip/ruoyi.jpg
|
||||
if(index % 2 == 0){
|
||||
return $.table.imageView('img/profile.jpg', 'http://ruoyi.vip/');
|
||||
}else {
|
||||
return $.table.imageView('ruoyi.png', 'http://ruoyi.vip/');
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
field : 'userPhone',
|
||||
title : '用户手机'
|
||||
},
|
||||
{
|
||||
field : 'userEmail',
|
||||
title : '用户邮箱'
|
||||
},
|
||||
{
|
||||
field : 'userBalance',
|
||||
title : '用户余额'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
formatter: function(value, row, index) {
|
||||
var actions = [];
|
||||
actions.push('<a class="btn btn-success btn-xs" href="#"><i class="fa fa-edit"></i>编辑</a> ');
|
||||
actions.push('<a class="btn btn-danger btn-xs" href="#"><i class="fa fa-remove"></i>删除</a>');
|
||||
return actions.join('');
|
||||
}
|
||||
}]
|
||||
};
|
||||
$.table.init(options);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,150 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
|
||||
<head>
|
||||
<th:block th:include="include :: header('初始多表格')" />
|
||||
</head>
|
||||
<body class="gray-bg">
|
||||
<div class="container-div">
|
||||
<div class="row">
|
||||
<div class="col-sm-12 select-table table-striped">
|
||||
<table id="bootstrap-table-1" data-mobile-responsive="true"></table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 select-table table-striped">
|
||||
<table id="bootstrap-table-2" data-mobile-responsive="true"></table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div th:include="include :: footer"></div>
|
||||
<script th:inline="javascript">
|
||||
var prefix = ctx + "demo/table";
|
||||
var datas = [[${@dict.getType('sys_normal_disable')}]];
|
||||
|
||||
$(function() {
|
||||
var options = {
|
||||
id: "bootstrap-table-1",
|
||||
url: prefix + "/list",
|
||||
createUrl: prefix + "/add",
|
||||
updateUrl: prefix + "/edit/{id}",
|
||||
removeUrl: prefix + "/remove",
|
||||
exportUrl: prefix + "/export",
|
||||
showSearch: false,
|
||||
showRefresh: false,
|
||||
showToggle: false,
|
||||
showColumns: false,
|
||||
columns: [{
|
||||
checkbox: true
|
||||
},
|
||||
{
|
||||
field : 'userId',
|
||||
title : '用户ID'
|
||||
},
|
||||
{
|
||||
field : 'userCode',
|
||||
title : '用户编号'
|
||||
},
|
||||
{
|
||||
field : 'userName',
|
||||
title : '用户姓名'
|
||||
},
|
||||
{
|
||||
field : 'userPhone',
|
||||
title : '用户手机'
|
||||
},
|
||||
{
|
||||
field : 'userEmail',
|
||||
title : '用户邮箱'
|
||||
},
|
||||
{
|
||||
field : 'userBalance',
|
||||
title : '用户余额'
|
||||
},
|
||||
{
|
||||
field: 'status',
|
||||
title: '用户状态',
|
||||
align: 'center',
|
||||
formatter: function(value, row, index) {
|
||||
return $.table.selectDictLabel(datas, value);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
formatter: function(value, row, index) {
|
||||
var actions = [];
|
||||
actions.push('<a class="btn btn-success btn-xs" href="#"><i class="fa fa-edit"></i>编辑</a> ');
|
||||
actions.push('<a class="btn btn-danger btn-xs" href="#"><i class="fa fa-remove"></i>删除</a>');
|
||||
return actions.join('');
|
||||
}
|
||||
}]
|
||||
};
|
||||
$.table.init(options);
|
||||
});
|
||||
|
||||
function queryParams(params) {
|
||||
var search = $.table.queryParams(params);
|
||||
search.userName = '测试1';
|
||||
return search;
|
||||
}
|
||||
|
||||
$(function() {
|
||||
var options = {
|
||||
id: "bootstrap-table-2",
|
||||
url: prefix + "/list",
|
||||
showSearch: false,
|
||||
showRefresh: false,
|
||||
showToggle: false,
|
||||
showColumns: false,
|
||||
queryParams: queryParams,
|
||||
columns: [{
|
||||
checkbox: true
|
||||
},
|
||||
{
|
||||
field : 'userId',
|
||||
title : '用户ID'
|
||||
},
|
||||
{
|
||||
field : 'userCode',
|
||||
title : '用户编号'
|
||||
},
|
||||
{
|
||||
field : 'userName',
|
||||
title : '用户姓名'
|
||||
},
|
||||
{
|
||||
field : 'userPhone',
|
||||
title : '用户手机'
|
||||
},
|
||||
{
|
||||
field : 'userEmail',
|
||||
title : '用户邮箱'
|
||||
},
|
||||
{
|
||||
field : 'userBalance',
|
||||
title : '用户余额'
|
||||
},
|
||||
{
|
||||
field: 'status',
|
||||
title: '用户状态',
|
||||
align: 'center',
|
||||
formatter: function(value, row, index) {
|
||||
return $.table.selectDictLabel(datas, value);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
formatter: function(value, row, index) {
|
||||
var actions = [];
|
||||
actions.push('<a class="btn btn-success btn-xs" href="#"><i class="fa fa-edit"></i>编辑</a> ');
|
||||
actions.push('<a class="btn btn-danger btn-xs" href="#"><i class="fa fa-remove"></i>删除</a>');
|
||||
return actions.join('');
|
||||
}
|
||||
}]
|
||||
};
|
||||
$.table.init(options);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,106 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
|
||||
<head>
|
||||
<th:block th:include="include :: header('其他操作')" />
|
||||
</head>
|
||||
<body class="gray-bg">
|
||||
<div class="container-div">
|
||||
<div class="btn-group-sm" id="toolbar" role="group">
|
||||
<a class="btn btn-success" onclick="$.table.showColumn('userName')">
|
||||
<i class="fa fa-check"></i> 显示姓名
|
||||
</a>
|
||||
<a class="btn btn-danger" onclick="$.table.hideColumn('userName')">
|
||||
<i class="fa fa-close"></i> 隐藏姓名
|
||||
</a>
|
||||
<a class="btn btn-info" onclick="selectColumns()">
|
||||
<i class="fa fa-search"></i> 获取选中姓名
|
||||
</a>
|
||||
<a class="btn btn-warning" onclick="$.table.refresh()">
|
||||
<i class="fa fa-refresh"></i> 刷新
|
||||
</a>
|
||||
<a class="btn btn-danger" onclick="$.table.destroy()">
|
||||
<i class="fa fa-refresh"></i> 销毁
|
||||
</a>
|
||||
<a class="btn btn-primary" onclick="selectFirstColumns()">
|
||||
<i class="fa fa-search"></i> 获取选中首列值
|
||||
</a>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 select-table table-striped">
|
||||
<table id="bootstrap-table" data-mobile-responsive="true"></table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div th:include="include :: footer"></div>
|
||||
<script th:inline="javascript">
|
||||
var prefix = ctx + "demo/table";
|
||||
var datas = [[${@dict.getType('sys_normal_disable')}]];
|
||||
|
||||
$(function() {
|
||||
var options = {
|
||||
url: prefix + "/list",
|
||||
showSearch: false,
|
||||
showRefresh: false,
|
||||
showToggle: false,
|
||||
showColumns: false,
|
||||
columns: [{
|
||||
checkbox: true
|
||||
},
|
||||
{
|
||||
field : 'userId',
|
||||
title : '用户ID'
|
||||
},
|
||||
{
|
||||
field : 'userCode',
|
||||
title : '用户编号'
|
||||
},
|
||||
{
|
||||
field : 'userName',
|
||||
title : '用户姓名'
|
||||
},
|
||||
{
|
||||
field : 'userPhone',
|
||||
title : '用户手机'
|
||||
},
|
||||
{
|
||||
field : 'userEmail',
|
||||
title : '用户邮箱'
|
||||
},
|
||||
{
|
||||
field : 'userBalance',
|
||||
title : '用户余额'
|
||||
},
|
||||
{
|
||||
field: 'status',
|
||||
title: '用户状态',
|
||||
align: 'center',
|
||||
formatter: function(value, row, index) {
|
||||
return $.table.selectDictLabel(datas, value);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
formatter: function(value, row, index) {
|
||||
var actions = [];
|
||||
actions.push('<a class="btn btn-success btn-xs" href="#"><i class="fa fa-edit"></i>编辑</a> ');
|
||||
actions.push('<a class="btn btn-danger btn-xs" href="#"><i class="fa fa-remove"></i>删除</a>');
|
||||
return actions.join('');
|
||||
}
|
||||
}]
|
||||
};
|
||||
$.table.init(options);
|
||||
});
|
||||
|
||||
function selectColumns() {
|
||||
var column = $.table.selectColumns('userName');
|
||||
alert(column);
|
||||
}
|
||||
|
||||
function selectFirstColumns() {
|
||||
var column = $.table.selectFirstColumns();
|
||||
alert(column);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
|
||||
<head>
|
||||
<th:block th:include="include :: header('跳转至指定页')" />
|
||||
</head>
|
||||
<body class="gray-bg">
|
||||
<div class="container-div">
|
||||
<div class="row">
|
||||
<div class="col-sm-12 select-table table-striped">
|
||||
<table id="bootstrap-table" data-mobile-responsive="true"></table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div th:include="include :: footer"></div>
|
||||
<script th:inline="javascript">
|
||||
var prefix = ctx + "demo/table";
|
||||
var datas = [[${@dict.getType('sys_normal_disable')}]];
|
||||
|
||||
$(function() {
|
||||
var options = {
|
||||
url: prefix + "/list",
|
||||
showSearch: false,
|
||||
showRefresh: false,
|
||||
showToggle: false,
|
||||
showColumns: false,
|
||||
showPageGo: true,
|
||||
columns: [{
|
||||
checkbox: true
|
||||
},
|
||||
{
|
||||
field : 'userId',
|
||||
title : '用户ID'
|
||||
},
|
||||
{
|
||||
field : 'userCode',
|
||||
title : '用户编号'
|
||||
},
|
||||
{
|
||||
field : 'userName',
|
||||
title : '用户姓名'
|
||||
},
|
||||
{
|
||||
field : 'userPhone',
|
||||
title : '用户手机'
|
||||
},
|
||||
{
|
||||
field : 'userEmail',
|
||||
title : '用户邮箱'
|
||||
},
|
||||
{
|
||||
field : 'userBalance',
|
||||
title : '用户余额'
|
||||
},
|
||||
{
|
||||
field: 'status',
|
||||
title: '用户状态',
|
||||
align: 'center',
|
||||
formatter: function(value, row, index) {
|
||||
return $.table.selectDictLabel(datas, value);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
formatter: function(value, row, index) {
|
||||
var actions = [];
|
||||
actions.push('<a class="btn btn-success btn-xs" href="#"><i class="fa fa-edit"></i>编辑</a> ');
|
||||
actions.push('<a class="btn btn-danger btn-xs" href="#"><i class="fa fa-remove"></i>删除</a>');
|
||||
return actions.join('');
|
||||
}
|
||||
}]
|
||||
};
|
||||
$.table.init(options);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,158 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
|
||||
<head>
|
||||
<th:block th:include="include :: header('自定义查询参数')" />
|
||||
</head>
|
||||
<body class="gray-bg">
|
||||
<div class="container-div">
|
||||
<div class="row">
|
||||
<div class="col-sm-12 select-table table-striped">
|
||||
<p class="select-title">通过queryParams方法设置</p>
|
||||
<table id="bootstrap-table" data-mobile-responsive="true"></table>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-12 search-collapse">
|
||||
<form id="post-form">
|
||||
<div class="select-list">
|
||||
<ul>
|
||||
<li>
|
||||
用户姓名：<input type="text" name="userName" value="测试6"/>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="col-sm-12 select-table table-striped">
|
||||
<p class="select-title">通过form自动填充</p>
|
||||
<table id="bootstrap-table-form" data-mobile-responsive="true"></table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div th:include="include :: footer"></div>
|
||||
<script th:inline="javascript">
|
||||
var prefix = ctx + "demo/table";
|
||||
var datas = [[${@dict.getType('sys_normal_disable')}]];
|
||||
|
||||
$(function() {
|
||||
var options = {
|
||||
url: prefix + "/list",
|
||||
showSearch: false,
|
||||
showRefresh: false,
|
||||
showToggle: false,
|
||||
showColumns: false,
|
||||
queryParams: queryParams,
|
||||
columns: [{
|
||||
checkbox: true
|
||||
},
|
||||
{
|
||||
field : 'userId',
|
||||
title : '用户ID'
|
||||
},
|
||||
{
|
||||
field : 'userCode',
|
||||
title : '用户编号'
|
||||
},
|
||||
{
|
||||
field : 'userName',
|
||||
title : '用户姓名'
|
||||
},
|
||||
{
|
||||
field : 'userPhone',
|
||||
title : '用户手机'
|
||||
},
|
||||
{
|
||||
field : 'userEmail',
|
||||
title : '用户邮箱'
|
||||
},
|
||||
{
|
||||
field : 'userBalance',
|
||||
title : '用户余额'
|
||||
},
|
||||
{
|
||||
field: 'status',
|
||||
title: '用户状态',
|
||||
align: 'center',
|
||||
formatter: function(value, row, index) {
|
||||
return $.table.selectDictLabel(datas, value);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
formatter: function(value, row, index) {
|
||||
var actions = [];
|
||||
actions.push('<a class="btn btn-success btn-xs" href="#"><i class="fa fa-edit"></i>编辑</a> ');
|
||||
actions.push('<a class="btn btn-danger btn-xs" href="#"><i class="fa fa-remove"></i>删除</a>');
|
||||
return actions.join('');
|
||||
}
|
||||
}]
|
||||
};
|
||||
$.table.init(options);
|
||||
});
|
||||
|
||||
function queryParams(params) {
|
||||
var search = $.table.queryParams(params);
|
||||
search.userName = '测试1';
|
||||
return search;
|
||||
}
|
||||
|
||||
|
||||
$(function() {
|
||||
var options = {
|
||||
id: "bootstrap-table-form",
|
||||
url: prefix + "/list",
|
||||
showSearch: false,
|
||||
showRefresh: false,
|
||||
showToggle: false,
|
||||
showColumns: false,
|
||||
columns: [{
|
||||
checkbox: true
|
||||
},
|
||||
{
|
||||
field : 'userId',
|
||||
title : '用户ID'
|
||||
},
|
||||
{
|
||||
field : 'userCode',
|
||||
title : '用户编号'
|
||||
},
|
||||
{
|
||||
field : 'userName',
|
||||
title : '用户姓名'
|
||||
},
|
||||
{
|
||||
field : 'userPhone',
|
||||
title : '用户手机'
|
||||
},
|
||||
{
|
||||
field : 'userEmail',
|
||||
title : '用户邮箱'
|
||||
},
|
||||
{
|
||||
field : 'userBalance',
|
||||
title : '用户余额'
|
||||
},
|
||||
{
|
||||
field: 'status',
|
||||
title: '用户状态',
|
||||
align: 'center',
|
||||
formatter: function(value, row, index) {
|
||||
return $.table.selectDictLabel(datas, value);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
formatter: function(value, row, index) {
|
||||
var actions = [];
|
||||
actions.push('<a class="btn btn-success btn-xs" href="#"><i class="fa fa-edit"></i>编辑</a> ');
|
||||
actions.push('<a class="btn btn-danger btn-xs" href="#"><i class="fa fa-remove"></i>删除</a>');
|
||||
return actions.join('');
|
||||
}
|
||||
}]
|
||||
};
|
||||
$.table.init(options);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
|
||||
<head>
|
||||
<th:block th:include="include :: header('翻页记住选择')" />
|
||||
</head>
|
||||
<body class="gray-bg">
|
||||
<div class="container-div">
|
||||
<div class="btn-group-sm" id="toolbar" role="group">
|
||||
<a class="btn btn-success" onclick="checkItem()">
|
||||
<i class="fa fa-check"></i> 选中项
|
||||
</a>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 select-table table-striped">
|
||||
<table id="bootstrap-table" data-mobile-responsive="true"></table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div th:include="include :: footer"></div>
|
||||
<script th:inline="javascript">
|
||||
var prefix = ctx + "demo/table";
|
||||
var datas = [[${@dict.getType('sys_normal_disable')}]];
|
||||
|
||||
$(function() {
|
||||
var options = {
|
||||
url: prefix + "/list",
|
||||
showSearch: false,
|
||||
showRefresh: false,
|
||||
showToggle: false,
|
||||
showColumns: false,
|
||||
rememberSelected: true,
|
||||
columns: [{
|
||||
field: 'state',
|
||||
checkbox: true
|
||||
},
|
||||
{
|
||||
field : 'userId',
|
||||
title : '用户ID'
|
||||
},
|
||||
{
|
||||
field : 'userCode',
|
||||
title : '用户编号'
|
||||
},
|
||||
{
|
||||
field : 'userName',
|
||||
title : '用户姓名'
|
||||
},
|
||||
{
|
||||
field : 'userPhone',
|
||||
title : '用户手机'
|
||||
},
|
||||
{
|
||||
field : 'userEmail',
|
||||
title : '用户邮箱'
|
||||
},
|
||||
{
|
||||
field : 'userBalance',
|
||||
title : '用户余额'
|
||||
},
|
||||
{
|
||||
field: 'status',
|
||||
title: '用户状态',
|
||||
align: 'center',
|
||||
formatter: function(value, row, index) {
|
||||
return $.table.selectDictLabel(datas, value);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
formatter: function(value, row, index) {
|
||||
var actions = [];
|
||||
actions.push('<a class="btn btn-success btn-xs" href="#"><i class="fa fa-edit"></i>编辑</a> ');
|
||||
actions.push('<a class="btn btn-danger btn-xs" href="#"><i class="fa fa-remove"></i>删除</a>');
|
||||
return actions.join('');
|
||||
}
|
||||
}]
|
||||
};
|
||||
$.table.init(options);
|
||||
});
|
||||
|
||||
// 选中数据
|
||||
function checkItem(){
|
||||
var arrays = $.table.selectColumns("userId");
|
||||
alert(arrays);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,168 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<th:block th:include="include :: header('表格搜索')" />
|
||||
<th:block th:include="include :: bootstrap-select-css" />
|
||||
</head>
|
||||
<body class="gray-bg">
|
||||
<div class="container-div">
|
||||
<div class="row">
|
||||
<div class="col-sm-12 search-collapse">
|
||||
<p class="select-title">普通条件查询</p>
|
||||
<form id="ordinary-form">
|
||||
<div class="select-list">
|
||||
<ul>
|
||||
<li>
|
||||
商户编号：<input type="text" name="userId"/>
|
||||
</li>
|
||||
<li>
|
||||
终端编号：<input type="text" name="termId"/>
|
||||
</li>
|
||||
<li>
|
||||
处理状态：<select name="status">
|
||||
<option value="">所有</option>
|
||||
<option value="0">初始</option>
|
||||
<option value="1">处理中</option>
|
||||
<option value="2">交易成功</option>
|
||||
<option value="3">交易失败</option>
|
||||
</select>
|
||||
</li>
|
||||
<li>
|
||||
<a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i> 搜索</a>
|
||||
<a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i> 重置</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-12 search-collapse">
|
||||
<p class="select-title">时间条件查询</p>
|
||||
<form id="time-form">
|
||||
<div class="select-list">
|
||||
<ul>
|
||||
<li>
|
||||
商户编号：<input type="text" name="userId"/>
|
||||
</li>
|
||||
<li>
|
||||
终端编号：<input type="text" name="termId"/>
|
||||
</li>
|
||||
<li class="select-time">
|
||||
<label>创建时间： </label>
|
||||
<input type="text" class="time-input" id="startTime" placeholder="开始时间" name="params[beginTime]"/>
|
||||
<span>-</span>
|
||||
<input type="text" class="time-input" id="endTime" placeholder="结束时间" name="params[endTime]"/>
|
||||
</li>
|
||||
<li>
|
||||
<a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i> 搜索</a>
|
||||
<a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset('time-form')"><i class="fa fa-refresh"></i> 重置</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-12 search-collapse">
|
||||
<p class="select-title">下拉多选条件查询</p>
|
||||
<form id="select-form">
|
||||
<div class="select-list">
|
||||
<ul>
|
||||
<li>
|
||||
商户编号：<input type="text" name="userId"/>
|
||||
</li>
|
||||
<li>
|
||||
终端编号：<input type="text" name="termId"/>
|
||||
</li>
|
||||
<li class="select-selectpicker">
|
||||
<label>操作类型： </label><select class="selectpicker" data-none-selected-text="请选择" multiple>
|
||||
<option value="">所有</option>
|
||||
<option value="0">初始</option>
|
||||
<option value="1">处理中</option>
|
||||
<option value="2">交易成功</option>
|
||||
<option value="3">交易失败</option>
|
||||
</select>
|
||||
</li>
|
||||
<li>
|
||||
<a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i> 搜索</a>
|
||||
<a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset('select-form')"><i class="fa fa-refresh"></i> 重置</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-12 search-collapse">
|
||||
<p class="select-title">复杂条件查询</p>
|
||||
<form id="complex-form">
|
||||
<div class="select-list">
|
||||
<ul>
|
||||
<li>
|
||||
<p>商户编号：</p>
|
||||
<input type="text" name="userId"/>
|
||||
</li>
|
||||
<li>
|
||||
<p>订单号：</p>
|
||||
<input type="text" name="orderNo"/>
|
||||
</li>
|
||||
<li>
|
||||
<p>日期：</p>
|
||||
<input type="text" class="time-input" placeholder="日期"/>
|
||||
</li>
|
||||
<li class="select-selectpicker">
|
||||
<p>状态：</p>
|
||||
<select class="selectpicker" data-none-selected-text="请选择" multiple>
|
||||
<option value="">所有</option>
|
||||
<option value="0">初始</option>
|
||||
<option value="1">处理中</option>
|
||||
<option value="2">交易成功</option>
|
||||
<option value="3">交易失败</option>
|
||||
</select>
|
||||
</li>
|
||||
<li>
|
||||
<p>供货商通道：</p>
|
||||
<select>
|
||||
<option value="">所有</option>
|
||||
<option value="0">腾讯</option>
|
||||
<option value="1">天猫</option>
|
||||
<option value="2">京东</option>
|
||||
</select>
|
||||
</li>
|
||||
<li>
|
||||
<p>来源：</p>
|
||||
<select>
|
||||
<option value="">所有</option>
|
||||
<option value="0">手机</option>
|
||||
<option value="1">电脑</option>
|
||||
<option value="2">第三方</option>
|
||||
</select>
|
||||
</li>
|
||||
<li>
|
||||
<p>运营商：</p>
|
||||
<select>
|
||||
<option value="">所有</option>
|
||||
<option value="0">移动</option>
|
||||
<option value="1">电信</option>
|
||||
<option value="2">联通</option>
|
||||
</select>
|
||||
</li>
|
||||
<li class="select-time">
|
||||
<p>回调时间：</p>
|
||||
<input type="text" class="time-input" placeholder="开始时间"/>
|
||||
<span>-</span>
|
||||
<input type="text" class="time-input" placeholder="结束时间"/>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="btn btn-primary btn-rounded btn-sm m50" onclick="$.table.search()"><i class="fa fa-search"></i> 搜索</a>
|
||||
<a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset('complex-form')"><i class="fa fa-refresh"></i> 重置</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<th:block th:include="include :: footer" />
|
||||
<th:block th:include="include :: bootstrap-select-js" />
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -39,8 +39,8 @@
|
|||
<script th:src="@{/ajax/libs/iCheck/icheck.min.js}"></script>
|
||||
<script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
|
||||
<script th:src="@{/ajax/libs/layui/layui.js}"></script>
|
||||
<script th:src="@{/ruoyi/js/common.js?v=3.3.0}"></script>
|
||||
<script th:src="@{/ruoyi/js/ry-ui.js?v=3.3.0}"></script>
|
||||
<script th:src="@{/ruoyi/js/common.js?v=3.4.0}"></script>
|
||||
<script th:src="@{/ruoyi/js/ry-ui.js?v=3.4.0}"></script>
|
||||
<script th:inline="javascript"> var ctx = [[@{/}]]; </script>
|
||||
</div>
|
||||
|
||||
|
|
@ -103,6 +103,40 @@
|
|||
<script th:src="@{/ajax/libs/cropbox/cropbox.js}"></script>
|
||||
</div>
|
||||
|
||||
<!-- jasny功能扩展插件 -->
|
||||
<div th:fragment="jasny-bootstrap-css">
|
||||
<link th:href="@{/ajax/libs/jasny/jasny-bootstrap.min.css}" rel="stylesheet"/>
|
||||
</div>
|
||||
<div th:fragment="jasny-bootstrap-js">
|
||||
<script th:src="@{/ajax/libs/jasny/jasny-bootstrap.min.js}"></script>
|
||||
</div>
|
||||
|
||||
<!-- fileinput文件上传插件 -->
|
||||
<div th:fragment="bootstrap-fileinput-css">
|
||||
<link th:href="@{/ajax/libs/bootstrap-fileinput/fileinput.min.css}" rel="stylesheet"/>
|
||||
</div>
|
||||
<div th:fragment="bootstrap-fileinput-js">
|
||||
<script th:src="@{/ajax/libs/bootstrap-fileinput/fileinput.min.js}"></script>
|
||||
</div>
|
||||
|
||||
<!-- duallistbox双列表框插件 -->
|
||||
<div th:fragment="bootstrap-duallistbox-css">
|
||||
<link th:href="@{/ajax/libs/duallistbox/bootstrap-duallistbox.min.css}" rel="stylesheet"/>
|
||||
</div>
|
||||
<div th:fragment="bootstrap-duallistbox-js">
|
||||
<script th:src="@{/ajax/libs/duallistbox/bootstrap-duallistbox.min.js}"></script>
|
||||
</div>
|
||||
|
||||
<!-- suggest搜索自动补全 -->
|
||||
<div th:fragment="bootstrap-suggest-js">
|
||||
<script th:src="@{/ajax/libs/suggest/bootstrap-suggest.min.js}"></script>
|
||||
</div>
|
||||
|
||||
<!-- typeahead搜索自动补全 -->
|
||||
<div th:fragment="bootstrap-typeahead-js">
|
||||
<script th:src="@{/ajax/libs/typeahead/bootstrap3-typeahead.min.js}"></script>
|
||||
</div>
|
||||
|
||||
<!-- jsonview格式化和语法高亮JSON格式数据查看插件 -->
|
||||
<div th:fragment="jsonview-css">
|
||||
<link th:href="@{/ajax/libs/jsonview/jquery.jsonview.css}" rel="stylesheet"/>
|
||||
|
|
@ -110,3 +144,11 @@
|
|||
<div th:fragment="jsonview-js">
|
||||
<script th:src="@{/ajax/libs/jsonview/jquery.jsonview.js}"></script>
|
||||
</div>
|
||||
|
||||
<!-- jquery.steps表单向导插件 -->
|
||||
<div th:fragment="jquery-steps-css">
|
||||
<link th:href="@{/ajax/libs/staps/jquery.steps.css}" rel="stylesheet"/>
|
||||
</div>
|
||||
<div th:fragment="jquery-steps-js">
|
||||
<script th:src="@{/ajax/libs/staps/jquery.steps.min.js}"></script>
|
||||
</div>
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
<link th:href="@{/css/animate.css}" rel="stylesheet"/>
|
||||
<link th:href="@{/css/style.css}" rel="stylesheet"/>
|
||||
<link th:href="@{/css/skins.css}" rel="stylesheet"/>
|
||||
<link th:href="@{/ruoyi/css/ry-ui.css?v=3.3.0}" rel="stylesheet"/>
|
||||
<link th:href="@{/ruoyi/css/ry-ui.css?v=3.4.0}" rel="stylesheet"/>
|
||||
</head>
|
||||
<body class="fixed-sidebar full-height-layout gray-bg" style="overflow: hidden" th:classappend="${@config.getKey('sys.index.skinName')}">
|
||||
<div id="wrapper">
|
||||
|
|
@ -69,6 +69,82 @@
|
|||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li th:classappend="${demoEnabled==false} ? 'hidden'">
|
||||
<a href="#"><i class="fa fa-desktop"></i><span class="nav-label">实例演示</span><span class="fa arrow"></span></a>
|
||||
<ul class="nav nav-second-level collapse">
|
||||
<li> <a>表单<span class="fa arrow"></span></a>
|
||||
<ul class="nav nav-third-level">
|
||||
<li><a class="menuItem" th:href="@{/demo/form/button}">按钮</a></li>
|
||||
<li><a class="menuItem" th:href="@{/demo/form/grid}">栅格</a></li>
|
||||
<li><a class="menuItem" th:href="@{/demo/form/select}">下拉框</a></li>
|
||||
<li><a class="menuItem" th:href="@{/demo/form/basic}">基本表单</a></li>
|
||||
<li><a class="menuItem" th:href="@{/demo/form/jasny}">功能扩展</a></li>
|
||||
<li><a class="menuItem" th:href="@{/demo/form/sortable}">拖动排序</a></li>
|
||||
<li><a class="menuItem" th:href="@{/demo/form/tabs_panels}">选项卡 & 面板</a></li>
|
||||
<li><a class="menuItem" th:href="@{/demo/form/validate}">表单校验</a></li>
|
||||
<li><a class="menuItem" th:href="@{/demo/form/wizard}">表单向导</a></li>
|
||||
<li><a class="menuItem" th:href="@{/demo/form/upload}">文件上传</a></li>
|
||||
<li><a class="menuItem" th:href="@{/demo/form/datetime}">日期和时间</a></li>
|
||||
<li><a class="menuItem" th:href="@{/demo/form/duallistbox}">左右互选组件</a></li>
|
||||
<li><a class="menuItem" th:href="@{/demo/form/autocomplete}">搜索自动补全</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li> <a>表格<span class="fa arrow"></span></a>
|
||||
<ul class="nav nav-third-level">
|
||||
<li><a class="menuItem" th:href="@{/demo/table/search}">查询条件</a></li>
|
||||
<li><a class="menuItem" th:href="@{/demo/table/footer}">数据汇总</a></li>
|
||||
<li><a class="menuItem" th:href="@{/demo/table/groupHeader}">组合表头</a></li>
|
||||
<li><a class="menuItem" th:href="@{/demo/table/export}">表格导出</a></li>
|
||||
<li><a class="menuItem" th:href="@{/demo/table/remember}">翻页记住选择</a></li>
|
||||
<li><a class="menuItem" th:href="@{/demo/table/pageGo}">跳转至指定页</a></li>
|
||||
<li><a class="menuItem" th:href="@{/demo/table/params}">自定义查询参数</a></li>
|
||||
<li><a class="menuItem" th:href="@{/demo/table/multi}">初始多表格</a></li>
|
||||
<li><a class="menuItem" th:href="@{/demo/table/button}">点击按钮加载表格</a></li>
|
||||
<li><a class="menuItem" th:href="@{/demo/table/fixedColumns}">表格冻结列</a></li>
|
||||
<li><a class="menuItem" th:href="@{/demo/table/event}">自定义触发事件</a></li>
|
||||
<li><a class="menuItem" th:href="@{/demo/table/detail}">表格细节视图</a></li>
|
||||
<li><a class="menuItem" th:href="@{/demo/table/image}">表格图片预览</a></li>
|
||||
<li><a class="menuItem" th:href="@{/demo/table/other}">表格其他操作</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li> <a>弹框<span class="fa arrow"></span></a>
|
||||
<ul class="nav nav-third-level">
|
||||
<li><a class="menuItem" th:href="@{/demo/modal/dialog}">模态窗口</a></li>
|
||||
<li><a class="menuItem" th:href="@{/demo/modal/layer}">弹层组件</a></li>
|
||||
<li><a class="menuItem" th:href="@{/demo/modal/table}">弹层表格</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li> <a>操作<span class="fa arrow"></span></a>
|
||||
<ul class="nav nav-third-level">
|
||||
<li><a class="menuItem" th:href="@{/demo/operate/table}">表格</a></li>
|
||||
<li><a class="menuItem" th:href="@{/demo/operate/other}">其他</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li> <a>图标<span class="fa arrow"></span></a>
|
||||
<ul class="nav nav-third-level">
|
||||
<li><a class="menuItem" th:href="@{/demo/icon/fontawesome}">Font Awesome</a></li>
|
||||
<li><a class="menuItem" th:href="@{/demo/icon/glyphicons}">Glyphicons</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#"><i class="fa fa-sitemap"></i> <span class="nav-label">四层菜单 </span><span class="fa arrow"></span></a>
|
||||
<ul class="nav nav-second-level collapse">
|
||||
<li>
|
||||
<a href="#" id="damian">三级菜单1<span class="fa arrow"></span></a>
|
||||
<ul class="nav nav-third-level">
|
||||
<li>
|
||||
<a href="#">四级菜单1</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">四级菜单2</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">三级菜单2</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
|
@ -146,7 +222,7 @@
|
|||
<script th:src="@{/js/jquery.contextMenu.min.js}"></script>
|
||||
<script th:src="@{/ajax/libs/blockUI/jquery.blockUI.js}"></script>
|
||||
<script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
|
||||
<script th:src="@{/ruoyi/js/ry-ui.js?v=3.3.0}"></script>
|
||||
<script th:src="@{/ruoyi/js/ry-ui.js?v=3.4.0}"></script>
|
||||
<script th:src="@{/ruoyi/index.js}"></script>
|
||||
<script th:src="@{/ajax/libs/fullscreen/jquery.fullscreen.js}"></script>
|
||||
<script th:inline="javascript">
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
|
||||
<link href="../static/css/style.css" th:href="@{/css/style.css}" rel="stylesheet"/>
|
||||
<link href="../static/css/login.min.css" th:href="@{/css/login.min.css}" rel="stylesheet"/>
|
||||
<link href="../static/ruoyi/css/ry-ui.css" th:href="@{/ruoyi/css/ry-ui.css?v=3.3.0}" rel="stylesheet"/>
|
||||
<link href="../static/ruoyi/css/ry-ui.css" th:href="@{/ruoyi/css/ry-ui.css?v=3.4.0}" rel="stylesheet"/>
|
||||
<!--[if lt IE 9]>
|
||||
<meta http-equiv="refresh" content="0;ie.html" />
|
||||
<![endif]-->
|
||||
|
|
@ -82,7 +82,7 @@
|
|||
<script src="../static/ajax/libs/validate/messages_zh.min.js" th:src="@{/ajax/libs/validate/messages_zh.min.js}"></script>
|
||||
<script src="../static/ajax/libs/layer/layer.min.js" th:src="@{/ajax/libs/layer/layer.min.js}"></script>
|
||||
<script src="../static/ajax/libs/blockUI/jquery.blockUI.js" th:src="@{/ajax/libs/blockUI/jquery.blockUI.js}"></script>
|
||||
<script src="../static/ruoyi/js/ry-ui.js" th:src="@{/ruoyi/js/ry-ui.js?v=3.3.0}"></script>
|
||||
<script src="../static/ruoyi/js/ry-ui.js" th:src="@{/ruoyi/js/ry-ui.js?v=3.4.0}"></script>
|
||||
<script src="../static/ruoyi/login.js" th:src="@{/ruoyi/login.js}"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -98,13 +98,68 @@
|
|||
<div class="ibox-content no-padding">
|
||||
<div class="panel-body">
|
||||
<div class="panel-group" id="version">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<h5 class="panel-title">
|
||||
<a data-toggle="collapse" data-parent="#version" href="#v34">v3.4.0</a><code class="pull-right">2019.06.03</code>
|
||||
</h5>
|
||||
</div>
|
||||
<div id="v34" class="panel-collapse collapse in">
|
||||
<div class="panel-body">
|
||||
<ol>
|
||||
<li>新增实例演示菜单及demo</li>
|
||||
<li>新增页签右键操作</li>
|
||||
<li>菜单管理新增打开方式</li>
|
||||
<li>新增点击某行触发的事件</li>
|
||||
<li>新增双击某行触发的事件</li>
|
||||
<li>新增单击某格触发的事件</li>
|
||||
<li>新增双击某格触发的事件</li>
|
||||
<li>新增是否启用显示细节视图</li>
|
||||
<li>支持上传任意格式文件</li>
|
||||
<li>修复角色权限注解失效问题</li>
|
||||
<li>左侧的菜单栏宽度调整</li>
|
||||
<li>新增响应完成后自定义回调函数</li>
|
||||
<li>支持前端及其他模块直接获取用户信息</li>
|
||||
<li>升级swagger到最新版2.9.2</li>
|
||||
<li>升级jquery.slimscroll到最新版1.3.8</li>
|
||||
<li>升级select2到最新版4.0.7</li>
|
||||
<li>新增角色配置本部门数据权限</li>
|
||||
<li>新增角色配置本部门及以下数据权限</li>
|
||||
<li>优化底部操作防止跳到页面顶端</li>
|
||||
<li>修改冻结列选框无效及样式问题</li>
|
||||
<li>修复部门四层级修改祖级无效问题</li>
|
||||
<li>更换开关切换按钮样式</li>
|
||||
<li>新增select2-bootstrap美化下拉框</li>
|
||||
<li>添加表格内图片预览方法</li>
|
||||
<li>修复权限校验失败跳转页面路径错误</li>
|
||||
<li>国际化资源文件调整</li>
|
||||
<li>通知公告布局调整</li>
|
||||
<li>删除页签操作功能</li>
|
||||
<li>表格树新增查询指定列值</li>
|
||||
<li>更改系统接口扫描方式及完善测试案例</li>
|
||||
<li>表格列浮动提示及字典回显默认去背景</li>
|
||||
<li>修复启用翻页记住前面的选择check没选中问题</li>
|
||||
<li>去除监控页面底部的广告</li>
|
||||
<li>日期控件功问题修复及data功能增强</li>
|
||||
<li>新增角色权限可见性（前端直接调用）</li>
|
||||
<li>新增获取当前登录用户方法（前端及子模块调用）</li>
|
||||
<li>修复热部署重启导致菜单丢失问题</li>
|
||||
<li>优化业务校验失败普通请求跳转页面</li>
|
||||
<li>操作日志新增状态条件查询</li>
|
||||
<li>操作类型支持多选条件查询</li>
|
||||
<li>通知公告防止滚动触底回弹优化</li>
|
||||
<li>其他细节优化</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<h5 class="panel-title">
|
||||
<a data-toggle="collapse" data-parent="#version" href="#v33">v3.3.0</a><code class="pull-right">2019.04.01</code>
|
||||
</h5>
|
||||
</div>
|
||||
<div id="v33" class="panel-collapse collapse in">
|
||||
<div id="v33" class="panel-collapse collapse">
|
||||
<div class="panel-body">
|
||||
<ol>
|
||||
<li>新增线程池统一管理</li>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<parent>
|
||||
<artifactId>ruoyi</artifactId>
|
||||
<groupId>com.ruoyi</groupId>
|
||||
<version>3.3</version>
|
||||
<version>3.4</version>
|
||||
</parent>
|
||||
<modelVersion>4.0.0</modelVersion>
|
||||
|
||||
|
|
|
|||
|
|
@ -81,7 +81,7 @@ public class Global
|
|||
*/
|
||||
public static String getVersion()
|
||||
{
|
||||
return StringUtils.nvl(getConfig("ruoyi.version"), "3.3.0");
|
||||
return StringUtils.nvl(getConfig("ruoyi.version"), "3.4.0");
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -89,7 +89,15 @@ public class Global
|
|||
*/
|
||||
public static String getCopyrightYear()
|
||||
{
|
||||
return StringUtils.nvl(getConfig("ruoyi.copyrightYear"), "2018");
|
||||
return StringUtils.nvl(getConfig("ruoyi.copyrightYear"), "2019");
|
||||
}
|
||||
|
||||
/**
|
||||
* 实例演示开关
|
||||
*/
|
||||
public static String isDemoEnabled()
|
||||
{
|
||||
return StringUtils.nvl(getConfig("ruoyi.demoEnabled"), "true");
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<parent>
|
||||
<artifactId>ruoyi</artifactId>
|
||||
<groupId>com.ruoyi</groupId>
|
||||
<version>3.3</version>
|
||||
<version>3.4</version>
|
||||
</parent>
|
||||
<modelVersion>4.0.0</modelVersion>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<parent>
|
||||
<artifactId>ruoyi</artifactId>
|
||||
<groupId>com.ruoyi</groupId>
|
||||
<version>3.3</version>
|
||||
<version>3.4</version>
|
||||
</parent>
|
||||
<modelVersion>4.0.0</modelVersion>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<parent>
|
||||
<artifactId>ruoyi</artifactId>
|
||||
<groupId>com.ruoyi</groupId>
|
||||
<version>3.3</version>
|
||||
<version>3.4</version>
|
||||
</parent>
|
||||
<modelVersion>4.0.0</modelVersion>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<parent>
|
||||
<artifactId>ruoyi</artifactId>
|
||||
<groupId>com.ruoyi</groupId>
|
||||
<version>3.3</version>
|
||||
<version>3.4</version>
|
||||
</parent>
|
||||
<modelVersion>4.0.0</modelVersion>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue