移除示例代码
This commit is contained in:
wrui
parent
7cb10e5154
commit
68fc142887
|
|
@ -1,80 +0,0 @@
|
|||
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";
|
||||
}
|
||||
}
|
||||
|
|
@ -1,243 +0,0 @@
|
|||
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;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
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";
|
||||
}
|
||||
}
|
||||
|
|
@ -1,303 +0,0 @@
|
|||
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();
|
||||
}
|
||||
}
|
||||
|
|
@ -1,53 +0,0 @@
|
|||
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/report")
|
||||
public class DemoReportController
|
||||
{
|
||||
private String prefix = "demo/report";
|
||||
|
||||
/**
|
||||
* 百度ECharts
|
||||
*/
|
||||
@GetMapping("/echarts")
|
||||
public String echarts()
|
||||
{
|
||||
return prefix + "/echarts";
|
||||
}
|
||||
|
||||
/**
|
||||
* 图表插件
|
||||
*/
|
||||
@GetMapping("/peity")
|
||||
public String peity()
|
||||
{
|
||||
return prefix + "/peity";
|
||||
}
|
||||
|
||||
/**
|
||||
* 线状图插件
|
||||
*/
|
||||
@GetMapping("/sparkline")
|
||||
public String sparkline()
|
||||
{
|
||||
return prefix + "/sparkline";
|
||||
}
|
||||
|
||||
/**
|
||||
* 图表组合
|
||||
*/
|
||||
@GetMapping("/metrics")
|
||||
public String metrics()
|
||||
{
|
||||
return prefix + "/metrics";
|
||||
}
|
||||
}
|
||||
|
|
@ -1,367 +0,0 @@
|
|||
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;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,147 +0,0 @@
|
|||
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;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,175 +0,0 @@
|
|||
package com.ruoyi.web.controller.tool;
|
||||
|
||||
import java.util.ArrayList;
|
||||
import java.util.LinkedHashMap;
|
||||
import java.util.List;
|
||||
import java.util.Map;
|
||||
import org.springframework.web.bind.annotation.DeleteMapping;
|
||||
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.PutMapping;
|
||||
import org.springframework.web.bind.annotation.RequestMapping;
|
||||
import org.springframework.web.bind.annotation.RestController;
|
||||
import com.ruoyi.common.core.controller.BaseController;
|
||||
import com.ruoyi.common.core.domain.AjaxResult;
|
||||
import com.ruoyi.common.utils.StringUtils;
|
||||
import io.swagger.annotations.Api;
|
||||
import io.swagger.annotations.ApiImplicitParam;
|
||||
import io.swagger.annotations.ApiModel;
|
||||
import io.swagger.annotations.ApiModelProperty;
|
||||
import io.swagger.annotations.ApiOperation;
|
||||
|
||||
/**
|
||||
* swagger 用户测试方法
|
||||
*
|
||||
* @author ruoyi
|
||||
*/
|
||||
@Api("用户信息管理")
|
||||
@RestController
|
||||
@RequestMapping("/test/user")
|
||||
public class TestController extends BaseController
|
||||
{
|
||||
private final static Map<Integer, UserEntity> users = new LinkedHashMap<Integer, UserEntity>();
|
||||
{
|
||||
users.put(1, new UserEntity(1, "admin", "admin123", "15888888888"));
|
||||
users.put(2, new UserEntity(2, "ry", "admin123", "15666666666"));
|
||||
}
|
||||
|
||||
@ApiOperation("获取用户列表")
|
||||
@GetMapping("/list")
|
||||
public AjaxResult userList()
|
||||
{
|
||||
List<UserEntity> userList = new ArrayList<UserEntity>(users.values());
|
||||
return AjaxResult.success(userList);
|
||||
}
|
||||
|
||||
@ApiOperation("获取用户详细")
|
||||
@ApiImplicitParam(name = "userId", value = "用户ID", required = true, dataType = "int", paramType = "path")
|
||||
@GetMapping("/{userId}")
|
||||
public AjaxResult getUser(@PathVariable Integer userId)
|
||||
{
|
||||
if (!users.isEmpty() && users.containsKey(userId))
|
||||
{
|
||||
return AjaxResult.success(users.get(userId));
|
||||
}
|
||||
else
|
||||
{
|
||||
return error("用户不存在");
|
||||
}
|
||||
}
|
||||
|
||||
@ApiOperation("新增用户")
|
||||
@ApiImplicitParam(name = "userEntity", value = "新增用户信息", dataType = "UserEntity")
|
||||
@PostMapping("/save")
|
||||
public AjaxResult save(UserEntity user)
|
||||
{
|
||||
if (StringUtils.isNull(user) || StringUtils.isNull(user.getUserId()))
|
||||
{
|
||||
return error("用户ID不能为空");
|
||||
}
|
||||
return AjaxResult.success(users.put(user.getUserId(), user));
|
||||
}
|
||||
|
||||
@ApiOperation("更新用户")
|
||||
@ApiImplicitParam(name = "userEntity", value = "新增用户信息", dataType = "UserEntity")
|
||||
@PutMapping("/update")
|
||||
public AjaxResult update(UserEntity user)
|
||||
{
|
||||
if (StringUtils.isNull(user) || StringUtils.isNull(user.getUserId()))
|
||||
{
|
||||
return error("用户ID不能为空");
|
||||
}
|
||||
if (users.isEmpty() || !users.containsKey(user.getUserId()))
|
||||
{
|
||||
return error("用户不存在");
|
||||
}
|
||||
users.remove(user.getUserId());
|
||||
return AjaxResult.success(users.put(user.getUserId(), user));
|
||||
}
|
||||
|
||||
@ApiOperation("删除用户信息")
|
||||
@ApiImplicitParam(name = "userId", value = "用户ID", required = true, dataType = "int", paramType = "path")
|
||||
@DeleteMapping("/{userId}")
|
||||
public AjaxResult delete(@PathVariable Integer userId)
|
||||
{
|
||||
if (!users.isEmpty() && users.containsKey(userId))
|
||||
{
|
||||
users.remove(userId);
|
||||
return success();
|
||||
}
|
||||
else
|
||||
{
|
||||
return error("用户不存在");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ApiModel("用户实体")
|
||||
class UserEntity
|
||||
{
|
||||
@ApiModelProperty("用户ID")
|
||||
private Integer userId;
|
||||
|
||||
@ApiModelProperty("用户名称")
|
||||
private String username;
|
||||
|
||||
@ApiModelProperty("用户密码")
|
||||
private String password;
|
||||
|
||||
@ApiModelProperty("用户手机")
|
||||
private String mobile;
|
||||
|
||||
public UserEntity()
|
||||
{
|
||||
|
||||
}
|
||||
|
||||
public UserEntity(Integer userId, String username, String password, String mobile)
|
||||
{
|
||||
this.userId = userId;
|
||||
this.username = username;
|
||||
this.password = password;
|
||||
this.mobile = mobile;
|
||||
}
|
||||
|
||||
public Integer getUserId()
|
||||
{
|
||||
return userId;
|
||||
}
|
||||
|
||||
public void setUserId(Integer userId)
|
||||
{
|
||||
this.userId = userId;
|
||||
}
|
||||
|
||||
public String getUsername()
|
||||
{
|
||||
return username;
|
||||
}
|
||||
|
||||
public void setUsername(String username)
|
||||
{
|
||||
this.username = username;
|
||||
}
|
||||
|
||||
public String getPassword()
|
||||
{
|
||||
return password;
|
||||
}
|
||||
|
||||
public void setPassword(String password)
|
||||
{
|
||||
this.password = password;
|
||||
}
|
||||
|
||||
public String getMobile()
|
||||
{
|
||||
return mobile;
|
||||
}
|
||||
|
||||
public void setMobile(String mobile)
|
||||
{
|
||||
this.mobile = mobile;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,322 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,593 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,620 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,235 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,60 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,432 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,118 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,259 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,198 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,353 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,55 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,193 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,192 +0,0 @@
|
|||
<!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
|
|
@ -1,215 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,95 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,245 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,56 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,86 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,90 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,86 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,78 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,69 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,79 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,123 +0,0 @@
|
|||
<!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>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,478 +0,0 @@
|
|||
<!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="wrapper wrapper-content animated fadeInRight">
|
||||
<div class="row">
|
||||
<div class="col-sm-3">
|
||||
<div class="ibox">
|
||||
<div class="ibox-content">
|
||||
<h5 class="m-b-md">Q1 销量</h5>
|
||||
<h2 class="text-navy">
|
||||
<i class="fa fa-play fa-rotate-270"></i> 上升
|
||||
</h2>
|
||||
<small>更新时间：12天以前</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<div class="ibox">
|
||||
<div class="ibox-content ">
|
||||
<h5 class="m-b-md">Q2 销量</h5>
|
||||
<h2 class="text-navy">
|
||||
<i class="fa fa-play fa-rotate-270"></i> 上升
|
||||
</h2>
|
||||
<small>更新时间：12天以前</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<div class="ibox">
|
||||
<div class="ibox-content">
|
||||
<h5 class="m-b-md">Q3 销量</h5>
|
||||
<h2 class="text-danger">
|
||||
<i class="fa fa-play fa-rotate-90"></i> 下降
|
||||
</h2>
|
||||
<small>更新时间：12天以前</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<div class="ibox">
|
||||
<div class="ibox-content">
|
||||
<h5 class="m-b-md">Q4 销量</h5>
|
||||
<h2 class="text-danger">
|
||||
<i class="fa fa-play fa-rotate-90"></i> 下降
|
||||
</h2>
|
||||
<small>更新时间：12天以前</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-3">
|
||||
<div class="ibox">
|
||||
<div class="ibox-content">
|
||||
<h5>本日访问量</h5>
|
||||
<h2>198 009</h2>
|
||||
<div id="sparkline1"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<div class="ibox">
|
||||
<div class="ibox-content">
|
||||
<h5>本周访问量</h5>
|
||||
<h2>65 000</h2>
|
||||
<div id="sparkline2"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<div class="ibox">
|
||||
<div class="ibox-content">
|
||||
<h5>本月访问量</h5>
|
||||
<h2>680 900</h2>
|
||||
<div id="sparkline3"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<div class="ibox">
|
||||
<div class="ibox-content">
|
||||
<h5>平均停留时间</h5>
|
||||
<h2>00:06:40</h2>
|
||||
<div id="sparkline4"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-3">
|
||||
<div class="ibox">
|
||||
<div class="ibox-content">
|
||||
<h5>使用率</h5>
|
||||
<h2>65%</h2>
|
||||
<div class="progress progress-mini">
|
||||
<div style="width: 68%;" class="progress-bar"></div>
|
||||
</div>
|
||||
|
||||
<div class="m-t-sm small">4:32更新</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-3">
|
||||
<div class="ibox">
|
||||
<div class="ibox-content">
|
||||
<h5>使用率</h5>
|
||||
<h2>50%</h2>
|
||||
<div class="progress progress-mini">
|
||||
<div style="width: 78%;" class="progress-bar"></div>
|
||||
</div>
|
||||
|
||||
<div class="m-t-sm small">4:32更新</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-3">
|
||||
<div class="ibox">
|
||||
<div class="ibox-content">
|
||||
<h5>使用率</h5>
|
||||
<h2>14%</h2>
|
||||
<div class="progress progress-mini">
|
||||
<div style="width: 38%;" class="progress-bar progress-bar-danger"></div>
|
||||
</div>
|
||||
|
||||
<div class="m-t-sm small">4:32更新</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-3">
|
||||
<div class="ibox">
|
||||
<div class="ibox-content">
|
||||
<h5>使用率</h5>
|
||||
<h2>20%</h2>
|
||||
<div class="progress progress-mini">
|
||||
<div style="width: 28%;" class="progress-bar progress-bar-danger"></div>
|
||||
</div>
|
||||
|
||||
<div class="m-t-sm small">4:32更新</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-3">
|
||||
<div class="ibox">
|
||||
<div class="ibox-content">
|
||||
<h5>百分比</h5>
|
||||
<h2>42/20</h2>
|
||||
<div class="text-center">
|
||||
<div id="sparkline5"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<div class="ibox">
|
||||
<div class="ibox-content">
|
||||
<h5>百分比</h5>
|
||||
<h2>100/54</h2>
|
||||
<div class="text-center">
|
||||
<div id="sparkline6"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<div class="ibox">
|
||||
<div class="ibox-content">
|
||||
<h5>百分比</h5>
|
||||
<h2>685/211</h2>
|
||||
<div class="text-center">
|
||||
<div id="sparkline7"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<div class="ibox">
|
||||
<div class="ibox-content">
|
||||
<h5>百分比</h5>
|
||||
<h2>240/32</h2>
|
||||
<div class="text-center">
|
||||
<div id="sparkline8"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-3">
|
||||
<div class="ibox">
|
||||
<div class="ibox-content">
|
||||
<h5>收入</h5>
|
||||
<h1 class="no-margins">886,200</h1>
|
||||
<div class="stat-percent font-bold text-navy">98% <i class="fa fa-bolt"></i></div>
|
||||
<small>总收入</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<div class="ibox">
|
||||
<div class="ibox-content">
|
||||
<h5>本月收入</h5>
|
||||
<h1 class="no-margins">1 738,200</h1>
|
||||
<div class="stat-percent font-bold text-navy">98% <i class="fa fa-bolt"></i></div>
|
||||
<small>总收入</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<div class="ibox">
|
||||
<div class="ibox-content">
|
||||
<h5>本日收入</h5>
|
||||
<h1 class="no-margins">-200,100</h1>
|
||||
<div class="stat-percent font-bold text-danger">12% <i class="fa fa-level-down"></i></div>
|
||||
<small>总收入</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<div class="ibox">
|
||||
<div class="ibox-content">
|
||||
<h5>搜索有收入</h5>
|
||||
<h1 class="no-margins">54,200</h1>
|
||||
<div class="stat-percent font-bold text-danger">24% <i class="fa fa-level-down"></i></div>
|
||||
<small>总收入</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-3">
|
||||
<div class="ibox">
|
||||
<div class="ibox-content">
|
||||
<h5>预警</h5>
|
||||
<table class="table table-stripped small m-t-md">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="no-borders">
|
||||
<i class="fa fa-circle text-navy"></i>
|
||||
</td>
|
||||
<td class="no-borders">
|
||||
示例 01
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<i class="fa fa-circle text-navy"></i>
|
||||
</td>
|
||||
<td>
|
||||
示例 02
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<i class="fa fa-circle text-navy"></i>
|
||||
</td>
|
||||
<td>
|
||||
示例 03
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<div class="ibox">
|
||||
<div class="ibox-content">
|
||||
<h5>项目</h5>
|
||||
<table class="table table-stripped small m-t-md">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="no-borders">
|
||||
<i class="fa fa-circle text-navy"></i>
|
||||
</td>
|
||||
<td class="no-borders">
|
||||
示例 01
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<i class="fa fa-circle text-navy"></i>
|
||||
</td>
|
||||
<td>
|
||||
示例 02
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<i class="fa fa-circle text-navy"></i>
|
||||
</td>
|
||||
<td>
|
||||
示例 03
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<div class="ibox">
|
||||
<div class="ibox-content">
|
||||
<h5>消息</h5>
|
||||
<table class="table table-stripped small m-t-md">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="no-borders">
|
||||
<i class="fa fa-circle text-danger"></i>
|
||||
</td>
|
||||
<td class="no-borders">
|
||||
示例 01
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<i class="fa fa-circle text-danger"></i>
|
||||
</td>
|
||||
<td>
|
||||
示例 02
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<i class="fa fa-circle text-danger"></i>
|
||||
</td>
|
||||
<td>
|
||||
示例 03
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<div class="ibox">
|
||||
<div class="ibox-content">
|
||||
<h5>通知</h5>
|
||||
<table class="table table-stripped small m-t-md">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="no-borders">
|
||||
<i class="fa fa-circle text-danger"></i>
|
||||
</td>
|
||||
<td class="no-borders">
|
||||
示例 01
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<i class="fa fa-circle text-danger"></i>
|
||||
</td>
|
||||
<td>
|
||||
示例 02
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<i class="fa fa-circle text-danger"></i>
|
||||
</td>
|
||||
<td>
|
||||
示例 03
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<th:block th:include="include :: footer" />
|
||||
<th:block th:include="include :: peity-js" />
|
||||
<th:block th:include="include :: sparkline-js" />
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function () {
|
||||
$("#sparkline1").sparkline([34, 43, 43, 35, 44, 32, 44, 52], {
|
||||
type: 'line',
|
||||
width: '100%',
|
||||
height: '60',
|
||||
lineColor: '#1ab394',
|
||||
fillColor: "#ffffff"
|
||||
});
|
||||
|
||||
$("#sparkline2").sparkline([24, 43, 43, 55, 44, 62, 44, 72], {
|
||||
type: 'line',
|
||||
width: '100%',
|
||||
height: '60',
|
||||
lineColor: '#1ab394',
|
||||
fillColor: "#ffffff"
|
||||
});
|
||||
|
||||
$("#sparkline3").sparkline([74, 43, 23, 55, 54, 32, 24, 12], {
|
||||
type: 'line',
|
||||
width: '100%',
|
||||
height: '60',
|
||||
lineColor: '#ed5565',
|
||||
fillColor: "#ffffff"
|
||||
});
|
||||
|
||||
$("#sparkline4").sparkline([24, 43, 33, 55, 64, 72, 44, 22], {
|
||||
type: 'line',
|
||||
width: '100%',
|
||||
height: '60',
|
||||
lineColor: '#ed5565',
|
||||
fillColor: "#ffffff"
|
||||
});
|
||||
|
||||
$("#sparkline5").sparkline([1, 4], {
|
||||
type: 'pie',
|
||||
height: '140',
|
||||
sliceColors: ['#1ab394', '#F5F5F5']
|
||||
});
|
||||
|
||||
$("#sparkline6").sparkline([5, 3], {
|
||||
type: 'pie',
|
||||
height: '140',
|
||||
sliceColors: ['#1ab394', '#F5F5F5']
|
||||
});
|
||||
|
||||
$("#sparkline7").sparkline([2, 2], {
|
||||
type: 'pie',
|
||||
height: '140',
|
||||
sliceColors: ['#ed5565', '#F5F5F5']
|
||||
});
|
||||
|
||||
$("#sparkline8").sparkline([2, 3], {
|
||||
type: 'pie',
|
||||
height: '140',
|
||||
sliceColors: ['#ed5565', '#F5F5F5']
|
||||
});
|
||||
});
|
||||
|
||||
$(function() {
|
||||
$("span.pie").peity("pie", {
|
||||
fill: ['#1ab394', '#d7d7d7', '#ffffff']
|
||||
})
|
||||
|
||||
$(".line").peity("line",{
|
||||
fill: '#1ab394',
|
||||
stroke:'#169c81',
|
||||
})
|
||||
|
||||
$(".bar").peity("bar", {
|
||||
fill: ["#1ab394", "#d7d7d7"]
|
||||
})
|
||||
|
||||
$(".bar_dashboard").peity("bar", {
|
||||
fill: ["#1ab394", "#d7d7d7"],
|
||||
width:100
|
||||
})
|
||||
|
||||
var updatingChart = $(".updating-chart").peity("line", { fill: '#1ab394',stroke:'#169c81', width: 64 })
|
||||
|
||||
setInterval(function() {
|
||||
var random = Math.round(Math.random() * 10)
|
||||
var values = updatingChart.text().split(",")
|
||||
values.shift()
|
||||
values.push(random)
|
||||
|
||||
updatingChart
|
||||
.text(values.join(","))
|
||||
.change()
|
||||
}, 1000);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,206 +0,0 @@
|
|||
<!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="wrapper wrapper-content animated fadeInDown">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-5">
|
||||
<div class="jumbotron">
|
||||
<h1>Peity图表</h1>
|
||||
<p>是一个内嵌数据图形可视化的图表库</p>
|
||||
<p><a href="http://benpickles.github.io/peity/" target="_blank" class="btn btn-primary btn-lg" role="button">了解 Peity</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<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="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<table class="table table-bordered white-bg">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>图表</th>
|
||||
<th>代码</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="pie">1/5</span>
|
||||
</td>
|
||||
<td>
|
||||
<code><span class="pie">1/5</span></code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="pie">226/360</span>
|
||||
</td>
|
||||
<td>
|
||||
<code><span class="pie">226/360</span></code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="pie">0.52/1.561</span>
|
||||
</td>
|
||||
<td>
|
||||
<code><span class="pie">0.52/1.561</span></code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="pie">1,4</span>
|
||||
</td>
|
||||
<td>
|
||||
<code><span class="pie">1,4</span></code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="pie">226,134</span>
|
||||
</td>
|
||||
<td>
|
||||
<code><span class="pie">226,134</span></code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="pie">0.52,1.041</span>
|
||||
</td>
|
||||
<td>
|
||||
<code><span class="pie">0.52,1.041</span></code>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</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="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<table class="table table-bordered white-bg">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>图表</th>
|
||||
<th>代码</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<span data-diameter="40" class="updating-chart">5,3,9,6,5,9,7,3,5,2,5,3,9,6,5,9,7,3,5,2</span>
|
||||
</td>
|
||||
<td>
|
||||
<code><span class="line">5,3,9,6,5,9,7,3,5,2</span></code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="line">5,3,9,6,5,9,7,3,5,2</span>
|
||||
</td>
|
||||
<td>
|
||||
<code><span class="line">5,3,9,6,5,9,7,3,5,2</span></code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="line">5,3,2,-1,-3,-2,2,3,5,2</span>
|
||||
</td>
|
||||
<td>
|
||||
<code><span class="line">5,3,2,-1,-3,-2,2,3,5,2</span></code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="line">0,-3,-6,-4,-5,-4,-7,-3,-5,-2</span>
|
||||
</td>
|
||||
<td>
|
||||
<code><span class="line">0,-3,-6,-4,-5,-4,-7,-3,-5,-2</span></code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="bar">5,3,9,6,5,9,7,3,5,2</span>
|
||||
</td>
|
||||
<td>
|
||||
<code><span class="bar">5,3,9,6,5,9,7,3,5,2</span></code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="bar">5,3,2,-1,-3,-2,2,3,5,2</span>
|
||||
</td>
|
||||
<td>
|
||||
<code><span class="bar">5,3,2,-1,-3,-2,2,3,5,2</span></code>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<th:block th:include="include :: footer" />
|
||||
<th:block th:include="include :: peity-js" />
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
$("span.pie").peity("pie", {
|
||||
fill: ['#1ab394', '#d7d7d7', '#ffffff']
|
||||
})
|
||||
|
||||
$(".line").peity("line",{
|
||||
fill: '#1ab394',
|
||||
stroke:'#169c81',
|
||||
})
|
||||
|
||||
$(".bar").peity("bar", {
|
||||
fill: ["#1ab394", "#d7d7d7"]
|
||||
})
|
||||
|
||||
$(".bar_dashboard").peity("bar", {
|
||||
fill: ["#1ab394", "#d7d7d7"],
|
||||
width:100
|
||||
})
|
||||
|
||||
var updatingChart = $(".updating-chart").peity("line", { fill: '#1ab394',stroke:'#169c81', width: 64 })
|
||||
|
||||
setInterval(function() {
|
||||
var random = Math.round(Math.random() * 10)
|
||||
var values = updatingChart.text().split(",")
|
||||
values.shift()
|
||||
values.push(random)
|
||||
|
||||
updatingChart
|
||||
.text(values.join(","))
|
||||
.change()
|
||||
}, 1000);
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,232 +0,0 @@
|
|||
<!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="wrapper wrapper-content animated fadeInDown">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-5">
|
||||
<div class="jumbotron">
|
||||
<h1>Sparkline</h1>
|
||||
<p>这是另一个可视化图表库</p>
|
||||
<p><a href="http://omnipotent.net/jquery.sparkline" target="_blank" class="btn btn-primary btn-lg" role="button">了解 Sparkline</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-7">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>Sparkline图表 <small>自定义颜色</small></h5>
|
||||
<div class="ibox-tools">
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<table class="table table-bordered white-bg">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>图表</th>
|
||||
<th>类型</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<span id="sparkline1"></span>
|
||||
</td>
|
||||
<td>
|
||||
内联线性图
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span id="sparkline2"></span>
|
||||
</td>
|
||||
<td>
|
||||
柱状图
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span id="sparkline3"></span>
|
||||
</td>
|
||||
<td>
|
||||
饼状图
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span id="sparkline4"></span>
|
||||
</td>
|
||||
<td>
|
||||
长线性图
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span id="sparkline5"></span>
|
||||
</td>
|
||||
<td>
|
||||
三态图
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span id="sparkline6"></span>
|
||||
</td>
|
||||
<td>
|
||||
散点图
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<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="graph_sparkline.html#">
|
||||
<i class="fa fa-wrench"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-user">
|
||||
<li><a href="graph_sparkline.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="graph_sparkline.html#">选项2</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content text-center h-200">
|
||||
<span id="sparkline7"></span>
|
||||
</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="graph_sparkline.html#">
|
||||
<i class="fa fa-wrench"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-user">
|
||||
<li><a href="graph_sparkline.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="graph_sparkline.html#">选项2</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content text-center h-200">
|
||||
<span id="sparkline8"></span>
|
||||
</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="graph_sparkline.html#">
|
||||
<i class="fa fa-wrench"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-user">
|
||||
<li><a href="graph_sparkline.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="graph_sparkline.html#">选项2</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content text-center h-200">
|
||||
<span id="sparkline9"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<th:block th:include="include :: footer" />
|
||||
<th:block th:include="include :: sparkline-js" />
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$("#sparkline1").sparkline([34, 43, 43, 35, 44, 32, 44, 52, 25], {
|
||||
type: 'line',
|
||||
lineColor: '#17997f',
|
||||
fillColor: '#1ab394',
|
||||
});
|
||||
$("#sparkline2").sparkline([5, 6, 7, 2, 0, -4, -2, 4], {
|
||||
type: 'bar',
|
||||
barColor: '#1ab394',
|
||||
negBarColor: '#c6c6c6'});
|
||||
|
||||
$("#sparkline3").sparkline([1, 1, 2], {
|
||||
type: 'pie',
|
||||
sliceColors: ['#1ab394', '#b3b3b3', '#e4f0fb']});
|
||||
|
||||
$("#sparkline4").sparkline([34, 43, 43, 35, 44, 32, 15, 22, 46, 33, 86, 54, 73, 53, 12, 53, 23, 65, 23, 63, 53, 42, 34, 56, 76, 15, 54, 23, 44], {
|
||||
type: 'line',
|
||||
lineColor: '#17997f',
|
||||
fillColor: '#ffffff',
|
||||
});
|
||||
|
||||
$("#sparkline5").sparkline([1, 1, 0, 1, -1, -1, 1, -1, 0, 0, 1, 1], {
|
||||
type: 'tristate',
|
||||
posBarColor: '#1ab394',
|
||||
negBarColor: '#bfbfbf'});
|
||||
|
||||
|
||||
$("#sparkline6").sparkline([4, 6, 7, 7, 4, 3, 2, 1, 4, 4, 5, 6, 3, 4, 5, 8, 7, 6, 9, 3, 2, 4, 1, 5, 6, 4, 3, 7, ], {
|
||||
type: 'discrete',
|
||||
lineColor: '#1ab394'});
|
||||
|
||||
$("#sparkline7").sparkline([52, 12, 44], {
|
||||
type: 'pie',
|
||||
height: '150px',
|
||||
sliceColors: ['#1ab394', '#b3b3b3', '#e4f0fb']});
|
||||
|
||||
$("#sparkline8").sparkline([5, 6, 7, 2, 0, 4, 2, 4, 5, 7, 2, 4, 12, 14, 4, 2, 14, 12, 7], {
|
||||
type: 'bar',
|
||||
barWidth: 8,
|
||||
height: '150px',
|
||||
barColor: '#1ab394',
|
||||
negBarColor: '#c6c6c6'});
|
||||
|
||||
$("#sparkline9").sparkline([34, 43, 43, 35, 44, 32, 15, 22, 46, 33, 86, 54, 73, 53, 12, 53, 23, 65, 23, 63, 53, 42, 34, 56, 76, 15, 54, 23, 44], {
|
||||
type: 'line',
|
||||
lineWidth: 1,
|
||||
height: '150px',
|
||||
lineColor: '#17997f',
|
||||
fillColor: '#ffffff',
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,92 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,86 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,107 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,80 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,143 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,83 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,80 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,80 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,150 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,106 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,77 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,158 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,89 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,168 +0,0 @@
|
|||
<!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>
|
||||
Loading…
Reference in New Issue