day15
本节内容介绍
上节作业讲解(让行进入编辑模式,批量编辑)
CSS之特殊内容补充
CSS内容补充之伪类
伪类实例:返回顶部终极版
CSS内容补充之无法被覆盖
jQuery插件
jQuery插件之验证\图片轮番和图标
jQuery插件之jQueryUI和EasyUI
jQuery插件之BootStrap介绍
一.上节作业讲解
思路
1.先把table画出来
2.全选\反选\取消
3. 标识:是否进入编辑模式
id='c1' class = "edit" 未进入编辑模式
id='c1' class = "edit doing" 进入编辑模式
判断一个标签是否包含一个样式用hasClass()
$('#c1').hasClass('doing')
4.当前行进入编辑模式
RowIntoEdit(tr)/RowOutEdit() //tr是当前行的选择器
一行数据,不一定每一个td都是可编辑的.所以在td上要有一个属性标示是否需要编辑.
还有,不是所有的td编辑时都使用input[type='text'],肯定有的是select有的是text.所以每一个td上还需要有一个属性表示编辑的类型,是select或者text
普通内容 => input
如果是input的话,还简单些,直接获取td里的text,然后放倒input里的value
<td id='xxx'>123</td>
t = $(xxx).text()
创建input标签,并且将标签的值设置成t
$(xxx).val(t)
所以对于普通的,td里的text就是数据源
选择 => select
对于那种选择的,数据源去哪里拿?
select数据源去哪里拿?首先数据源不能保存在本地,因为后端的数据经常更新.
有两种方式:
1.通过ajax向服务端发送一个请求,服务端反回给一个数据源.这样又多了一次请求.
2.我们知道html是客户端浏览器访问服务端端口时反回的,所以我们想服务端在反回的时候,能不能在js中声明一个全局变量,当我们需要用的时候直接使用这个全局变量就可以获取数据源了.
分析:第一种方式是数据源是在需要时通过ajax从服务端获取.
第二种方式是当用户一开始访问请求的时候,就把数据源放倒JS里的一个全局变量,用的时候不需要再去服务端进行请求了.
我们使用第二种方式,我们这里没有后台,所以就在页面直接模拟出来一个全局变量里有些值.(如果有后台,全局变量的存在也是必须的,至于里面的数据是通过数据库还是通过ajax获取的都可以.)
全局变量:
STATU_DICT={
1:'在线',
2:'下线',
}
需求列出来了,就两个要求:
1. td是否可以编辑
2. 要以什么类型方式进行编辑.
所以我要对tr行里的元素td进行循环
判断td里是否有一个edit 属性为true,如果是true则可以进行编辑
判断td里是否有一个edit-type ,它的值如果edit-type = 'input'就用普通的,
如果edit-type = 'select'就用select方式编辑,这里要注意了,我们要向select的数据源进行取值,当然我们可以在RowIntoEdit()函数中写死,也可以作为参数出传入,
写死肯定不好,作为参数靠谱些.我们会想,那么我们直接在调用函数时把变量传入.反正是全局变量.
对没错,是可以传入变量,但是编程理念不应该这么做,我们要把函数想象成一个没有思想的工具,
假如它是一个DVD一体机,有好几张dvd唱片,你要使用dvd播放dvd时,你要动手把dvd唱片找到,然后放入到DVD,这个流程才对.
你不能直接告诉dvd,去播放"周杰伦"的唱片.这就相当于你直接点播放按钮,并对dvd机喊了句"周杰伦".
所以我们要在td里在设置一个属性global-key = 'STATUS_DICT',标示数据源从哪个全局变量去取.
5.退出编辑模式
<td> input</td>
<td> select</td>
实例代码:(还包含了按住ctrl键选择select时批量操作!)代码必看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.edit-mode{
padding:10px;
}
.editing{
padding:10px;
background-color: #ffd00f;
}
</style>
</head>
<body>
<div style="padding: 20px">
<input type="button" value="全选" onclick="CheckAll('#edit_mode','#tb1');"/>
<input type="button" value="反选" onclick="CheckReverse('#edit_mode','#tb1');"/>
<input type="button" value="取消" onclick="CheckCancel('#edit_mode','#tb1');"/>
<a /></p>
</form>
我们知道直接访问url就是get方式.而点击上面定义的form表单中的submit按钮时才是post提交.所以我们在点击提交之前是不是要通过浏览器请求这个页面.
在页面中输入内容点击submit的提交按钮后,在进行post提交.
也就是说我们访问http://127.0.0.1:8000/app01/handle_db/时 要调用app01/views.py里定义的handle_db函数.
当我们在打开的页面输入数据后,还要在调用handle_db函数.
所以我们要在handle_db函数中做if语句进行判断.一般请求都是get,这时候就返回页面.只有当请求是post时才提交数据.于是handle_db函数的代码如下:
def handle_db(request):
if request.method == 'POST':
# print(request.POST) 这里是看看我们获得的POST数据是什么类型
# <QueryDict: {'username': [''], 'password': [''], 'age': ['']}>
# 我们看到是input里定义的name属性,和输入的值.值放在列表里.
models.UserInfo.objects.create(username=request.POST['username'],
password=request.POST['password'],
age=request.POST['age']
)
user_list_obj = models.UserInfo.objects.all()
return render(request,'t1.html',{'li':user_list_obj})
完成这个函数后,我们就可以在页面进行提交数据添加用户名,密码和age保存到数据库了.
本节相关知识点完结.我们学会了
如何创建Django工程.
如何创建APP项目
如何启动工程.
django自带的admin后台管理功能简述.
Django提供的ORM使用介绍
路由系统的使用方法.
项目中使用ORM,完成对数据库增删改查的基本操作.
使用html模版,把前端和后台数据进行关联.
前端通过post提交数据写入数据库的基本使用演示.
相关文章：