后台管理平台编辑表格

一、作业需求：

后台管理平台 ，编辑表格：

1. 非编辑模式：

可对每行进行选择； 反选； 取消选择

2. 编辑模式:

进入编辑模式时如果行被选中，则被选中的行万变为可编辑状态，未选中的不改变

退出编辑模式时，所有的行进入非编辑状态

处于编辑模式时，行被选中则进入编辑状态，取消选择则进入非编辑状态

二、博客地址：https://www.cnblogs.com/catepython/p/9516250.html

三、运行环境

操作系统：Win10

Python：3.6.4rcl

Pycharm：2017.3.4

四、功能实现

实现功能:
1、非编辑模式
​ 可以对每行进行选择，全选，取消，反选 ；

2、编辑模式
​ 进入编辑模式时:
如果行被选中，则被选中的行变为可编辑状态，未选中则不改变
​ 退出编辑模式时:
保存所有的行的修改并进入非编辑状态
​ 单个勾选:
勾上时: 进入编辑状态
去勾时: 保存所在行的修改进入非编辑状态
​ 全选时:
所有行进入编辑状态
取消是:
所有行保存修改进入非编辑状态
反选时:
被选中的行
取消勾选 保存修改进入非编辑状态
未被选中的行
进行勾选 进入编辑状态

readme

 

一、相关知识点

jQuery

http://jquery.cuishifeng.cn/

模块 《=》类库
DOM/BOM/JavaScript的类库

版本：
1.x 1.12
2.x
3.x

转换：
jquery对象[0] => Dom对象
Dom对象 => $(Dom对象)


一、查找元素
DOM
10左右
jQuery：
选择器，直接找到某个或者某类标签
1. id
$('#id')
2. class
<div class='c1'></div>
$(".c1")
3. 标签
<div id='i10' class='c1'>
<a>f</a>
<a>f</a>
</div>
<div class='c1'>
<a>f</a>
</div>
<div class='c1'>
<div class='c2'> </div>
</div>

$('a')

4. 组合a
<div id='i10' class='c1'>
<a>f</a>
<a>f</a>
</div>
<div class='c1'>
<a>f</a>
</div>
<div class='c1'>
<div class='c2'> </div>
</div>

$('a')
$('.c2')

$('a,.c2,#i10')

5. 层级
$('#i10 a') 子子孙孙
$('#i10>a') 儿子

6. 基本
:first
:last
:eq()
7. 属性
$('[alex]') 具有alex属性的所有标签
$('[alex="123"]') alex属性等于123的标签


<input type='text'/>
<input type='text'/>
<input type='file'/>
<input type='password'/>

$("input[type='text']")
$(':text')

实例：
多选，反选，全选
- 选择权
-
$('#tb:checkbox').prop('checked'); 获取值
$('#tb:checkbox').prop('checked', true); 设置值
-
jQuery方法内置循环： $('#tb:checkbox').xxxx

- $('#tb:checkbox').each(function(k){
// k当前索引
// this，DOM，当前循环的元素 $(this)

})
- var v = 条件 ? 真值 : 假值


筛选


$('#i1').next()
$('#i1').nextAll()
$('#i1').nextUntil('#ii1')

<div>
<a>asdf</a>
<a>asdf</a>
<a id='i1'>asdf</a>
<a>asdf</a>
<a id='ii1'>asdf</a>
<a>asdf</a>
</div>

$('#i1').prev()
$('#i1').prevAll()
$('#i1').prevUntil('#ii1')


$('#i1').parent()
$('#i1').parents()
$('#i1').parentsUntil()

$('#i1').children()
$('#i1').siblings()
$('#i1').find()
$('li:eq(1)')
$('li').eq(1)
first()
last()
hasClass(class)

文本操作：
$(..).text() # 获取文本内容
$(..).text(“<a>1</a>”) # 设置文本内容

$(..).html()
$(..).html("<a>1</a>")

$(..).val()
$(..).val(..)
样式操作：
addClass
removeClass
toggleClass

属性操作：
# 专门用于做自定义属性
$(..).attr('n')
$(..).attr('n','v')
$(..).removeAttr('n')

<input type='checkbox' id='i1' />


# 专门用于chekbox,radio
$(..).prop('checked')
$(..).prop('checked', true)

PS:
index 获取索引位置

文档处理：
append
prepend
after
before

remove
empty

clone
css处理

$('t1').css('样式名称', '样式值')
点赞：
- $('t1').append()
- $('t1').remove()
- setInterval
- 透明度 1 》 0
- position
- 字体大小，位置
位置：
$(window).scrollTop() 获取
$(window).scrollTop(0) 设置
scrollLeft([val])

offset().left 指定标签在html中的坐标
offset().top 指定标签在html中的坐标

position() 指定标签相对父标签(relative)标签的坐标
<div style='relative'>
<div>
<div id='i1' style='position:absolute;height:80px;border:1px'></div>
</div>
</div>


$('i1').height() # 获取标签的高度 纯高度
$('i1').innerHeight() # 获取边框 + 纯高度 + ？
$('i1').outerHeight() # 获取边框 + 纯高度 + ？
$('i1').outerHeight(true) # 获取边框 + 纯高度 + ？

# 纯高度，边框，外边距，内边距

事件
DOM： 三种绑定方式
jQuery：
$('.c1').click()
$('.c1').....

$('.c1').bind('click',function(){

})

$('.c1').unbind('click',function(){

})

*******************
$('.c').delegate('a', 'click', function(){

})
$('.c').undelegate('a', 'click', function(){

})

$('.c1').on('click', function(){

})
$('.c1').off('click', function(){

})

阻止事件发生
return false

# 当页面框架加载完成之后，自动执行
$(function(){

$(...)

})

jQuery扩展：
- $.extend $.方法
- $.fn.extend $(..).方法

(function(){
var status = 1;
// 封装变量
})(jQuery)


二、操作元素

===》实例：

作业：
一：
$('i1').height() # 获取标签的高度 纯高度
$('i1').innerHeight() # 获取边框 + 纯高度 + ？
$('i1').outerHeight() # 获取边框 + 纯高度 + ？
$('i1').outerHeight(true) # 获取边框 + 纯高度 + ？

# 纯高度，边框，外边距，内边距

二、所有实例敲一遍

三、编辑框

二、核心代码

　　

 

 

 

 

转载于:https://www.cnblogs.com/gaodi2345/p/11309633.html