checkbox怎么根据后端传值选中与不选中

checkbox怎么根据后端传值选中与不选中,第1张

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把那一行的值放到修改页面上去等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/9721025.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-01
下一篇 2023-05-01

发表评论

登录后才能评论

评论列表(0条)

保存