jq选择CheckBox进行排序
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的报告</title>
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="shortcut icon" href="../../favicon.ico">
<link href="/static/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
<link href="/static/js/skin/layer.css" rel="stylesheet" type="text/css" />
<link href="/static/css/font-awesome.css?v=4.4.0" rel="stylesheet">
<link href="/static/css/animate.css" rel="stylesheet">
<link href="/static/css/style.css?v=4.1.0" rel="stylesheet">
<link href="/static/css/main.css" rel="stylesheet">
<link href="/static/css/treeCss.css" rel="stylesheet" type="text/css" />
</head>
<style>
#moduleSelect{
border: 1px solid #f5f7fa;margin:14px 0;padding:0;
background: white;
}
#moduleSelect h5{
background: #f5f7fa;line-height: 24px;padding: 6px 10px;margin: 0
}
.moduleSelect ul li{
padding-right: 12px;
float: left;
}
.moduleSelect{
padding:0;
}
#templateType{
width: 198px;
vertical-align: middle;
padding:0 12px;
}
#moduleHtml select,#moduleHtml input[type='text']{
display: inline-block;
height: 30px;
padding: 10px 10px;
margin:20px 20px;
font-size: 14px;
line-height: 20px;
/*border-radius: 4px;*/
width:90%;
}
#moduleHtml select{
padding: 0;
}
#moduleHtml textarea{
display: inline-block;
padding: 10px 10px;
margin:10px 20px;
font-size: 14px;
line-height: 20px;
height: 100px;
border-radius: 4px;
width:90%;
}
#moduleHtml input[type='checkbox']{
display: inline-block;
padding: 10px 10px;
margin:10px 20px;
font-size: 14px;
line-height: 20px;
border-radius: 4px;
}
#moduleHtml .control-label{
width:90%;
text-align: start;
margin:0 20px 0 20px;
}
.moduleTitle h4{
background: #f5f7fa;
text-indent: 0.6em;
margin: 0;
padding:10px 6px;
}
fieldset {
border: 1px solid #f5f7fa;
margin-bottom: 6px;
}
.el-tree {
border:none;
}
.el-checkbox__inner {
width:13px;
height:13px;
}
.el-tree-node__label {
font-size: 12px;
}
.el-tree-node__content {
line-height: 24px;
height: 24px;
}
.el-tree-node__content{
border-bottom: 1px dashed #ccc;
}
.el-checkbox__inner::after {
left: 2px;
position: absolute;
top: 0px;
}
#modules{
margin-top:10px;
margin-bottom:10px;
}
#moduleContent{
padding-bottom: 10px;
}
</style>
<body class="gray-bg">
<!--<input type="hidden" value="" id="loadModules" onchange="loadModules();">-->
<pre id="moudleTemplateIds" hidden="hidden"></pre>
<div class="wrapper wrapper-content" id="createTemplate">
<div class="row" style="min-height: 500px">
<div class="col-sm-12 animated fadeInRight">
<div class="row col-sm-12">
<form class="form-inline">
<div class="col-md-3 form-group">
<label>标题:</label>
<input type="text" id="titleName" class="form-control input-sm" name="search" placeholder="请输入模块标题">
</div>
<div class="col-md-3 form-group">
<label>类型:</label>
<select id="templateType" class="form-control input-sm" name="templateType"></select>
</div>
</form>
</div>
<div class="row col-md-12">
<form class="form-inline">
<div class="col-md-3 form-group" id="moduleSelect">
<div class="moduleSelect col-md-12">
<h5>模块</h5>
<ul id="modules">
</ul>
<div style="clear: both"></div>
</div>
<div class="moduleSelect col-md-12">
<h5>部门</h5>
<div>
<el-tree :data="data2" show-checkbox="" default-expand-all node-key="id" ref="tree" highlight-current :props="defaultProps">
</el-tree>
</div>
</div>
</div>
<div class="col-md-9 form-group">
<div id="moduleHtml" class="mail-box animated fadeInDown" style="margin: 15px;">
</div>
</div>
</form>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="buttons">
<p style="text-align: center"><el-button @click="getCheckedKeys" id="moduleSave">保存</el-button></p>
</div>
</div>
<!-- 全局js -->
<script src="/static/js/jquery.min.js?v=2.1.4"></script>
<script src="/static/js/bootstrap.min.js?v=3.3.6"></script>
<script type="text/javascript" src="/static/js/z_packge1.js"></script>
<script src="/static/js/layer.min.js" type="text/javascript" ></script>
<script src="/static/js/vue.js"></script>
<script src="/static/js/treeJs.js"></script>
<script>
$(function(){
var params = {
"dictionary_type":"reportType",
"dictionary_root":true
};
var url = '/dictionary/findByTypeAndRoot';
$.ajaxSend(url,params).done(function(data) {
if (data.code==='00000000') {
var dataModule=data.payload.results.dictionarys[0].children;
$('#templateType').html('');
$.each(dataModule, function(i,item) {
var list = '<option value="' + item.code + '">' + item.name + '</option>';
$('#templateType').append(list);
});
}
});
var url = '/moduleTemplate/list';
var moduleTempates={};
var params = {
curPage:0,
pageSize:1000
}
$.ajaxSend(url,params).done(function(data) {
if (data.code==='00000000') {
var dataModule=data.payload.results.moudleTemplates.content;
$('#modules').html('');
var tempLists='';
$.each(dataModule, function(i,item) {
tempLists+= '<li><input type="checkbox" name="'+item.name+'" value="'+item.id+'"/>'+item.name+'</li>';
moduleTempates[item.id]=item.template;
moduleTempates[item.name]=item.name;
});
$('#modules').append(tempLists);
}
});
$('#modules').on("change","input[type='checkbox']",function() {
setTimeout(getD,500);
function getD(){
var arguments1 = document.getElementById("requireOrderDay");
for(var i=0; i<arguments1.rows.length;i++){
if(i==0){
var obj=arguments1.rows[0];
for(var j=0; j<obj.cells.length;j++) {
var obj2=obj.cells[j];
obj2.setAttribute("title", obj2.innerHTML);
}
}
}
}
var mtId=$(this).val();
var thisName=$(this).attr('name');
if($(this).is(':checked')){/*选中，显示模板*/
var tempContent= moduleTempates[mtId];
var tempContentName= moduleTempates[thisName];
var moudleTemplateIds=$('#moudleTemplateIds').html();
if(!moudleTemplateIds){
$('#moudleTemplateIds').append(mtId);
$('#moduleHtml').append('<div class="moduleTitle" id="show_mt_'+mtId+'"><h4><span>一</span>、'+tempContentName+'</h4><div style="padding-bottom: 10px;" class="moduleContent">'+tempContent+'</div></div>');
}else{
$('#moudleTemplateIds').append(','+mtId+'');
var moudleTemplateId=$('#moudleTemplateIds').html();
var moudleTemplateIds=moudleTemplateId.split(",");
console.log(moudleTemplateIds.length);
var $index=listIndex(moudleTemplateIds.length-1);
$('#moduleHtml').append('<div class="moduleTitle" id="show_mt_'+mtId+'"><h4><span>'+$index+'、</span>'+tempContentName+'</h4><div style="padding-bottom: 10px;" class="moduleContent">'+tempContent+'</div></div>');
}
}else{ /*取消模板*/
$('#show_mt_'+mtId).remove();
var moudleTemplateId=$('#moudleTemplateIds').html();
var moudleTemplateIds=moudleTemplateId.split(",");
function removeByValue(arr,val) {
for(var i=0; i<arr.length; i++) {
if(arr[i] == val) {
arr.splice(i, 1);
}
}
return arr;
}
var moudleTemplate=removeByValue(moudleTemplateIds,$(this).val());
$('#moudleTemplateIds').html(moudleTemplateIds.join(','));
}
});
function listIndex($index) {
var changeIndex=['一','二','三','四','五','六','七','八','九','十','十一','十二','十三','十四','十五','十六','十七','十八','十九','二十','二十一','二十二','二十三','二十四','二十五','二十六','二十七','二十八','二十九','三十'];
return changeIndex[$index];
}
});
</script>
</body>
</html>
jq选择CheckBox进行排序的更多相关文章
- Android 基础一 TextView，Style样式，Activity 传值，选择CheckBox 显示密码
1.修改TextView字体 mTextView = (TextView) findViewById(R.id.textview1); mTextView.setText("I am her ...
- jquery中选择checkbox拼接成字符串，然后到后台拆分取值
jquery中选择checkbox拼接成字符串,然后到后台拆分取值 js中的代码 $("#btn").click(function(){ var chenked=$("i ...
- jq选择子元素
jq选择子元素 一.获取父级元素 1. parent([expr]): 获取指定元素的所有父级元素 <div id="par_div"><a id="h ...
- 单项选择RadioButton和多项选择CheckBox的使用
在Android中,可以通过RadioButton和RadioGroup的组合来实现单项选择的效果.而多项选择则是通过CheckBox来实现的. 1.单项选择RadioButton 我们知道,一 ...
- 【PHP数据结构】其它排序：简单选择、桶排序
这是我们算法正式文章系列的最后一篇文章了,关于排序的知识我们学习了很多,包括常见的冒泡和快排,也学习过了不太常见的简单插入和希尔排序.既然今天这是最后一篇文章,也是排序相关的最后一篇,那我们就来轻松一 ...
- 如何使用Excel选择整列排序
在excel中,排序的时候弹窗提示“若要执行此操作,所有合并单元格需大小相同”,该怎么操作才能实现排序呢?接下来,小编就和大家分享具体操作. 工具/原料 excel 方法/步骤 打开出 ...
- js&jQ判断checkbox表单是否被选中
js判断: if(document.getElementById("checkboxID").checked){ alert("checkbox is checked&q ...
- js 和 jq 控制 checkbox
判断checkbox是否选中 1. $("#id").attr("checked") 在jquery 1.6前(含1.6),返回值是boolean类型的tru ...
- JS选择checkbox
<script> window.onload = function () { //获取checkbox var ids1 = document.getElementsByName('Vot ...
随机推荐
- 麦香牛肉（dp 、数论）
麦香牛肉 时间限制: 1 Sec 内存限制: 128 MB 题目描述 农夫约翰的奶牛几乎要武装暴动,因为他们听说麦当劳要推出新产品麦香牛肉.奶牛们要尽力阻止这种产品的上市.他们研究了一种“劣等包装” ...
- java：面向对象（多态，final，抽象方法，（简单工厂模式即静态方法模式），接口）
* 生活中的多态:同一种物质,因环境不同而表现不同的形态. * 程序中多态:同一个"接口",因不同的实现而执行不同的操作. * 多态和方法的重写经常结合使用,子类重写父类的方法,将 ...
- Python简单网络爬虫实战—下载论文名称，作者信息（下）
在Python简单网络爬虫实战—下载论文名称,作者信息(上)中,学会了get到网页内容以及在谷歌浏览器找到了需要提取的内容的数据结构,接下来记录我是如何找到所有author和title的 1.从sou ...
- Cocos2d-x入门之旅
Cocos通过动作(Action)让精灵动起来,把数个动作组成序列(Sequence)就能让精灵做出连续的动作,在动作中我们可以改变精灵的位置,旋转角度,缩放比例,等等 动作(Action)# 首先我 ...
- ubuntu 设置qt程序开机启动
1.建立一个桌面文件,forklift-app.desktop Name填写程序的名字 Exec执行程序的路径 [Desktop Entry] Version=1.0 Name=forklift-ap ...
- LeetCode.1154-一年中的第几天(Day of the Year)
这是小川的第410次更新,第442篇原创 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第261题(顺位题号是1154).给定表示格式为YYYY-MM-DD的公历日期的字符串日期,返回 ...
- Leetcode之广度优先搜索（BFS）专题-994. 腐烂的橘子（Rotting Oranges）
Leetcode之广度优先搜索(BFS)专题-994. 腐烂的橘子(Rotting Oranges) BFS入门详解:Leetcode之广度优先搜索(BFS)专题-429. N叉树的层序遍历(N-ar ...
- ssh隧道详解与案例利用讲解
原文阅读:https://www.52stu.org/?p=206 你是否有过自己身处内网,却想整个远控上线?你是否有过身处目标内网,却想把目标的内网的Linux的ssh转发出来?你是否想过穿透多层网 ...
- TensorFlow实战第三课（可视化、加速神经网络训练）
matplotlib可视化 构件图形 用散点图描述真实数据之间的关系(plt.ion()用于连续显示) # plot the real data fig = plt.figure() ax = fig ...
- Linux CentOS安装搭建FTP文件服务
本文环境:centos7,IP=192.168.1.11 1.安装vsftpd和默认配置启动 1.1 安装vsftpd yum install -y vsftpd 1.2 启动vsftpd syste ...