通过Ajax动态生成的页面,解决复选框,选择一次不能再选择的问题

相信这个例子大家都看过了

http://www.helloweba.com/view-blog-254.html

在一般的页面都能用,可是在Ajax动态生成的页面上却不能用。

下面介绍一下如何解决动态生成的页面,实现复选框的全选与反选(checkbox)


实现全选与反选。

$("#allCheckBox").click(function (){
	if(this.checked){
		$(':checkbox[name=checkName]').prop('checked',this.checked);
	}else{
		$(':checkbox[name=checkName]').prop({checked:false});
	}
});

获取选中的值

var valArr = new Array; 
	$(":checkbox[name=checkName]").each(function(i){ 
    	if($(this).prop("checked")==true){
	        valArr[i] = $(this).val(); 
    	}
    }); 
    var vals = valArr.join(',');


  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
生成带有框的ztree只能选择最后一级节点的代码,可以使用Spring Boot框架和若依框架来实现。具体步骤如下: 1. 在Maven项目中引入若依框架的依赖,例如: ```xml <dependency> <groupId>com.ruoyi</groupId> <artifactId>ruoyi-common</artifactId> <version>${ruoyi.version}</version> </dependency> ``` 2. 在Spring Boot的配置文件中配置MyBatis-Plus框架和Druid数据库连接池,例如: ```properties # MyBatis-Plus配置 mybatis-plus.mapper-locations=classpath*:/mapper/**/*.xml mybatis-plus.configuration.map-underscore-to-camel-case=true mybatis-plus.global-config.db-config.id-type=auto mybatis-plus.global-config.db-config.logic-delete-value=1 mybatis-plus.global-config.db-config.logic-not-delete-value=0 mybatis-plus.global-config.db-config.column-underline=true # Druid连接池配置 spring.datasource.url=jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=utf8&allowMultiQueries=true&useSSL=false&serverTimezone=UTC spring.datasource.username=root spring.datasource.password=123456 spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver spring.datasource.druid.initial-size=1 spring.datasource.druid.min-idle=1 spring.datasource.druid.max-active=20 spring.datasource.druid.validation-query=SELECT 1 FROM DUAL spring.datasource.druid.test-while-idle=true spring.datasource.druid.test-on-borrow=false spring.datasource.druid.test-on-return=false spring.datasource.druid.pool-prepared-statements=true spring.datasource.druid.max-pool-prepared-statement-per-connection-size=20 spring.datasource.druid.filters=stat,wall,log4j2 spring.datasource.druid.connection-properties=druid.stat.mergeSql=true;druid.stat.slowSqlMillis=5000 ``` 3. 在Java代码中,创建一个Controller类和一个Service类,用于处理请求和查询数据库。例如: ```java @RestController @RequestMapping("/tree") public class TreeController { @Autowired private TreeService treeService; @GetMapping("/data") public List<TreeNode> getTreeData() { return treeService.getTreeData(); } } @Service public class TreeService { @Autowired private TreeMapper treeMapper; public List<TreeNode> getTreeData() { List<TreeNode> nodes = new ArrayList<>(); List<Tree> trees = treeMapper.selectList(null); for (Tree tree : trees) { TreeNode node = new TreeNode(); node.setId(tree.getId()); node.setPid(tree.getPid()); node.setName(tree.getName()); node.setOpen(tree.getOpen()); node.setChecked(tree.getChecked()); nodes.add(node); } return nodes; } } ``` 4. 在Java代码中,定义一个实体类和一个Mapper接口,用于映射数据库表和执行SQL语句。例如: ```java @Data public class Tree { @TableId(type = IdType.AUTO) private Long id; private Long pid; private String name; private Boolean open; private Boolean checked; } @Mapper public interface TreeMapper extends BaseMapper<Tree> { } ``` 5. 在前端页面中引入ztree插件的JS和CSS文件,以及jQuery和layer等必要的依赖库。例如: ```html <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/zTree.v3/3.5.49/css/zTreeStyle/zTreeStyle.min.css"> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/layer/3.1.1/layer.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/zTree.v3/3.5.49/js/jquery.ztree.core.min.js"></script> ``` 6. 在前端页面中定义一个div元素和一个JavaScript函数,用于生成ztree树形结构。例如: ```html <div id="tree"></div> <script> $(function() { $.ajax({ url: "/tree/data", type: "GET", dataType: "json", success: function(data) { var setting = { check: { enable: true, chkStyle: "checkbox", chkboxType: { "Y": "", "N": "" } }, data: { simpleData: { enable: true } }, callback: { onClick: function(event, treeId, treeNode) { // 点击节点时触发的事件 } } }; $.fn.zTree.init($("#tree"), setting, data); }, error: function() { layer.alert("请求数据失败!"); } }); }); </script> ``` 注意:以上代码仅供参考,需要根据具体情况进行修改和调整。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值