1、首先,将自动值1设置为由jquery检查。
2、其次,提交时,执行getCheckBoxVal函数,遍历所有复选框,将选中的设置为1。
3、最后,将未选中的选项值设置为0,将复选框选项设置为选中,并保持选中状态以确保将其提交到服务器即可。
在checkbox标签加一个rowid属性,这个属性值就是id值,而同行的其它input标签的id属性值就用属性值+id值,用于区分,例如,id为30000000000这行,更新时间文本框的id属性值为time30000000000,
当checkbox被点击时判断是不是被选中,如果被选中,通过documentgetElementById("time30000000000")value获得选中行的更新时间,以及自动更新,在js代码中将要传到后台的数据拼到一起再发送到后台
普通表单控件使用:$('#' + id)val(xxxx);
复选框使用:$('#' + id)prop('checked', 'checked');
$('#' + id)removeProp('checked');
首先贴出代码片段,然后根据代码逐一说明
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"pageEncoding="ISO-8859-1"%>
<!--引入 fn jstl支持-->
<%@ taglib prefix="fn" uri="
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 401 Transitional//EN" "
<html>
<head>
<meta ;
假设复选框的name是licence,后台用info对象接收,那么回显的时候实际上就是判断infolicence是否包含当前复选项的值,这时候借助jstl fn组件中的函数contains来解决,contains用来判断参数1中是否包含字符串参数2,用法和java总的一样。这里要注意,为了能使用contains函数,需要在页头进行声明,参见代码片段第三行
关于contains的详细描述如下:
fn:contains(string, substring)
假如参数string中包含参数substring,返回true
例如:<c:if test="${fn:contains(name, searchString)}">
fn还有很多其他好用的函数
1、fn:containsIgnoreCase(string, substring)
假如参数string中包含参数substring(忽略大小写),返回true
2、 fn:endsWith(string, suffix)
假如参数 string 以参数suffix结尾,返回true
3、fn:escapeXml(string)
将有非凡意义的XML (和HTML)转换为对应的XML character entity code,并返回
4、fn:indexOf(string, substring)
返回参数substring在参数string中第一次出现的位置
5、fn:join(array, separator)
将一个给定的数组array用给定的间隔符separator串在一起,组成一个新的字符串并返回。
6、fn:length(item)
返回参数item中包含元素的数量。参数Item类型是数组、collection或者String。假如是String类型,返回值是String中的字符数。
7、fn:replace(string, before, after)
返回一个String对象。用参数after字符串替换参数string中所有出现参数before字符串的地方,并返回替换后的结果
8、fn:split(string, separator)
返回一个数组,以参数separator 为分割符分割参数string,分割后的每一部分就是数组的一个元素
9、fn:startsWith(string, prefix)
假如参数string以参数prefix开头,返回true
10、fn:substring(string, begin, end)
返回参数string部分字符串,从参数begin开始到参数end位置,包括end位置的字符
11、fn:substringAfter(string, substring)
返回参数substring在参数string中后面的那一部分字符串
12、fn:substringBefore(string, substring)
返回参数substring在参数string中前面的那一部分字符串
13、fn:toLowerCase(string)
将参数string所有的字符变为小写,并将其返回
14、fn:toUpperCase(string)
将参数string所有的字符变为大写,并将其返回
15、fn:trim(string)
去除参数string 首尾的空格,并将其返回
1 Django Admin 不适合最终用户使用
Django admin是为管理员设计的, 而不是给最终用户使用的 Django admin的存在是为了方便管理员添加修改删除数据和管理站点任务
2 列表显示
如上图, 因为model的默认文本显示是 xxx object, 所以在admin列表页中默认显示的也是xxx object 如果希望显示更有用的信息 我们可以进行如下设置:
为model写__unicode__()方法
如果希望model在列表页中显示更多项, 则需要使用list_display
__unicode()__例子:
# modelspy
from djangodb import models
class Article(modelsModel):
title = modelsCharField(max_length=100)
slug = modelsCharField(max_length=100)
content = modelsTextField()
is_published = modelsBooleanField(default=False)
def __unicode__(self):
return selftitle
# adminpy
from djangocontrib import admin
from models import Article
adminsiteregister(Article)
结果:
如果希望显示其他项:
# adminpy
from djangocontrib import admin
from models import Article
class ArticleAdmin(adminModelAdmin):
list_display = ('title', 'is_published')
adminsiteregister(Article, ArticleAdmin)
结果:
3 为ModelAdmin增加动作
我们可以为ModelAdmin增加method或function, 以此使admin界面更符合我们的需求
例如, 我们希望在在admin界面中显示一个明确地URL, 但当我们在model中定义了get_absolute_url()方法后, django admin默认给我们的却是一个与我们想要的URL完全不同的URL 于是我们可以通过以下方法定义该URL:
# adminpy
from djangocontrib import admin
from djangocoreurlresolvers import reverse
from djangoutilshtml import format_html
from models import Article
class ArticleAdmin(adminModelAdmin):
list_display = ('title', 'is_published',)
readonly_fields = ('show_url',)
def show_url(self, instance):
url = reverse('article_detail', kwargs={'pl': instancepk})
response = format_html("""""", url)
return response
show_urlshort_description = u"文章预览"
# 显示HTML tag
# 对于用户提交的数据, 永远不要这么设置!
show_urlallow_tags = True
注意, allow_tags属性, 其默认值是False, 如果错误使用将会带来安全隐患 如果设置为True,
在admin中会允许显示HTML tag 因此我们使用的原则是, 对于用户输入的信息, 永远不设置allow_tags=True
只有当其内容是系统生成, 用户无法修改的时, 才能使用allow_tags=True
4 不在多用户编辑环境使用list_editable
django admin为我们提供了在列表页修改model属性的功能, 这样方便管理员一次修改多个属性 如果管理员只有一个人的话,
那就没问题, 但在多用户环境中时, 却是会存在一个很严重的潜在问题 因为在list页提交的修改信息, 记录的是位置, 而不是model的主键
举个例子, 文章列表页默认按照创建顺序逆序排列, 用户A打开文章列表页, 并开始修改, 同时用户B增加了一篇新文章, 此时,
当用户A提交修改后其后的文章信息都会出错
这是《后台产品设计指南》系列文章的 第3篇 内容,更多精彩可以点击下方链接查看。
后台产品设计指南
本文会和大家讲解一下后台产品涉及到的一些常见概念,让大家对后台产品有一个整理的认知。
前台只直接和用户直接交互的界面,比如web页面、移动端app、小程序等等。
中台的概念比较复杂,可以分为技术中台,产品中台,组织中台等内容。通俗来说中台就是表转化,系统化的服务,用来帮助使用者能快速实现某种能力的工具。比如阿里的电商中台可以给淘宝、天猫、咸鱼等平台使用。
后台主要面向管理人员,实现流程审核、人员管理等支撑工作,比如CRM、OA、财务等系统。
用一句话来对比这几个概念的核心,那就是前台应用、中台赋能、后台支撑。
无论是前台、中台和后台都会涉及到前端技术和后端技术。前端技术是指界面开发,比如html、css、js技术;后端技术是指接口、服务开发,比如Java、PHP等等。
单页版
单页面应用方案,所有 *** 作无需跳转
单标签版每个页面都是独立的html页面
体验相对更友好,减轻浏览器负载
iframe版
基于 iframe 实现,简单实用,多标签页面
左侧、头部和底部是通用的部分,中间部分通过iframe嵌入子页面
实现比较简单,上手快
后台页面的布局一般包括以下三种,主要包括品牌标识区域、导航区域、用户信息区域和主体功能区域。
品牌标识区域:一般用来展示品牌信息。
导航区域:一般包括侧导航和顶部导航两部分,这两部分可能同时存在,也可能只有一部分。建议导航不要超过两级,不然会比较难 *** 作。
用户信息区域:展示用户个人信息,比如头像和用户名,一般会包含用户设置、退出登录功能。全局搜索、主题设置、消息中心等入口也可以放在这里。
主题功能区域:当前页面的核心功能区域,主要包括数据列表、数据查询、数据 *** 作和数据添加都能内容。
表格
列表页是后台最为常见的页面形式之一,用于展现数据。由于页面的宽度有限,所以需要优先展示主要内容。比如说用户发布的文章这个场景,可以概况为是谁在哪里什么时间发布了什么文章,展示的字段包括用户ID、用户昵称、文章名称、发布时间、发布平台等。
搜索查询
如果是比较负责的后台产品,搜索条件会比较多,往往包含了输入框、下拉列表、时间筛选等组件,如何将这些组件合理有序的排列是非常重要的。此外搜索条件重置按钮、搜索条件自定义保存这些功能也非常使用。
表单
表单包括很多类型,简单的有输入框、文本框、单选框、复选框、下拉列表;复杂的有穿梭框、树、时间选择等等。
数据 *** 作
常见的 *** 作类型有添加、编辑、查看详情、禁用启用、设置排序、删除等等。在很多后台产品中添加和编辑其实是一个功能,只不过编辑的时候部分字段做了限制;设置排序可以通过设置排序值或者拖拽的方式来进行实现;删除是一个比较危险的 *** 作,一般需要d窗二次确认,而且是伪删除并不是真的删除。
分页
分页可以分批请求数据,既减轻了服务端的压力,也缩短了用户的等待时间。
登录
作为使用系统的第一步,登录页面也需要认真对待。比如一个适合平台主题的插画背景、定期更换的风景背景可以很好的调节用户的心情。
工作台首页
工作台是一般登录后的第一个页面,这里需要显示平台的关键性数据、待办事项、常见 *** 作入口,帮助用户快速的进行日常 *** 作。
后台中常见的页面后面的系列会单独进行讲解,这里就不过多地展开了。
后台产品尽管业务可能不同,但设计理念设计方法其实是大同小异的。我们你可以通过以下方法来进行学习:
1自己注册一些典型的账号,比如公众号、小鹅通、有赞这些比较成熟的平台。
2查找一些开源的后台框架、产品,比如禅道、Element等等。
3研究公司自己的产品,每个公司都有自己的信息化系统,常见的有OA、运营平台等等。
4获取竞品公司的账号,通过获取行业top公司的演示平台,研究其功能和产品设计也是一个不错的方法。
在写作过程中,如果有意见或者想法,欢迎有兴趣的读者添加我的微信一起交流探索,共同进步。
这是我写的批量删除的一段前端代码
//删除按钮
$(":button[value=删除]")click(function(){
var idlist="";
var idCount=0;
$(":checkbox[checked]")each(function(){
idlist = idlist+$(this)val()+',';
idCount++;
});
if(idCount==0){
alert("请选择删除对象!");
return ;
}
var r=confirm("确认删除"+idCount+"个联系人?");
if (r!=true)
{
idlist="";
return;
}
$(":checkbox[checked]")each(function(){
$("tr[id="+$(this)val()+"]")remove();
});
$post(
"<c:url value='/Controller/DeleteContacter'/>",
{ids:idlist},
function(data){
var s = "删除数据"+idCount+"条,成功"+data+"条";
alert(s);
windowlocationhref="<c:url value ='/Controller/FindAll!findAllpage=' />"+"${nowallpage}";
}
);
});
});
这是action部分代码
private String ids;
private ContacterService service;
private InputStream inputStream;
public String execute(){
>
以上就是关于checkbox怎么根据后端传值选中与不选中全部的内容,包括:checkbox怎么根据后端传值选中与不选中、如何 在struts中 获取checkbox选中行 的所有数据。。把这些数据传到后台处理。。、jquery前端接口如何把后端传过来的一堆值中通过判断复选框的id把那一行的值放到修改页面上去等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)