不想看那么多分析的，只想了解大概原理的可直接跳转到目录二。
想直接拿 最终解决办法的，请跳到目录四。
一、前提背景
1.直接向后台传值删除的批量操作
在使用Thinkphp 工作时，会发现若想获取所有选中的id，并进行批量删除操作时，会使用以下代码：
在选中复选框checkbox后，点击delete删除按钮，向后台控制器Action传输ids，然后在后台循环执行已经写好了的SQL删除语句，删除成功后向前端返回值。
<div>
//删除按钮
<li><a class="delete" href="__URL__/foreverdelete/navTabId/{$module}" target="selectedTodo" callback="navTabAjax" title="delete" warn="{$Think.lang.select_item}" postType="string"rel="ids"><span>{$Think.lang.del_item}</span></a></li>
//显示的list表格
<table class="table" width="100%"
layoutH="111">
<thead>
<tr>
<th width="5"><input type="checkbox" group="ids" class="checkboxCtrl"></th>
<th width="5" orderField="item_id" <if condition="$_REQUEST._order eq 'item_id'">class="{$_REQUEST._sort}"</if>>{$Think.lang.id}</th>
<th width="300">Name</th>
</tr>
</thead>
<tbody>
<volist id="vo" name="list">
<tr target="sid_node" rel="{$vo['item_id']}" style="height: 27px;">
<td><input name="ids" value="{$vo['item_id']}" type="checkbox"></td>
<td>{$vo['item_id']}</td>
<td title="{$vo['NOTE']}">{$vo['ITEM_NAME']}</td>
</tr>
</volist>
</tbody>
</table>
</div>
2.执行原理
以上代码能成功执行的原理：
是<a> 标签定义超链接向后台foreverdelete方法传值，
target 用于控制链接点击后的行为，获取到我们选中的 checkbox的id值；
最后将一切操作放到后台控制器中执行；
callback是回调逻辑，用于操作成功后的响应
targert和 callback 都是自定义属性，
target="selectedTodo"
target 属性用于指定链接点击后操作的目标对象或作用域。在给定的代码中，target="selectedTodo" 表示该链接的操作将作用于一个名为 selectedTodo 的目标对象。这种机制通常用于与前端框架或库结合使用，例如
DWZ（一个基于 jQuery 的 UI 框架），用于实现特定的功能，如选中并删除多个条目。
在这种情况下，selectedTodo 是一个用于存储用户选择数据的变量或对象，当链接被点击时，这些数据会被传递给后端进行处理。该属性的值 selectedTodo 并不是标准 HTML 中定义的值，而是由前端框架或开发者自定义的标识符，用于触发特定的逻辑处理流程。
callback="navTabAjax"
callback 属性用于指定链接点击后执行的回调函数。回调函数是一种在操作完成后执行的函数，通常用于处理异步操作的结果。在给定的代码中，callback="navTabAjax" 表示链接点击后会调用一个名为 navTabAjax 的回调函数。
该函数的作用包括：检查响应状态码是否为成功，重新加载指定的导航标签页（navTab），或关闭当前标签页等。通过 callback 属性，可以将链接的行为与特定的前端逻辑绑定在一起，从而实现更复杂的交互功能。
总结
3.缺陷
一切只能在后台进行固定操作，无法在页面进行操作时动态更改。
当我想实现批量更改数据操作：选中需要更改的->点击按钮->打开弹窗->输入我想要更改的值时->提交更改时。
target需要更改为 target=“
dialog”，用于打开对应弹窗。但此时就会发现，缺少了selectedTodo，就无法获取到选中的checkbox的id，传值到后台。
二、通过按钮打开弹窗，并获取选中的所有id，进行批量更改操作
1.解决思路
经过尝试和思考，我最终选择通过点击时，调用JS方法拼接好id，然后向后台方法传值写入数据库中，mass_change方法从数据库获取ids，最后传给弹窗的方法。
<div>
<li><a class="assign" href="__URL__/mass_change/navTabId/{$module}" target="
dialog" mask="true" warn="{$Think.lang.select_item}" rel="mass_change" width="800" height="300" onclick="sendids
()"><span>批量</span></a></li>
</div>
<script>
function sendids
(){
//得到chekbox对象
var checkbox = document.getElementsByName
("ids"
);
var id ="";
//当选中时，拿到它的value值，并拼起来
//需要注意的是，这样拼出来的id字符串，是以 ","结尾的，所以在使用的时候，应先将 ","去掉，也可在if中做判断 ,当为最后一个时，拼的时候不加 ","
for
( var i = 0; i < checkbox.length; i++
) {
if
(checkbox[i].checked
){
id = id + checkbox[i].value+",";
}
}
$.ajax
({
type: "GET",
url: '__URL__/get_mass/ids/'+id,
dataType: "json",
async: true,
}
);
}
</script>
2.注意事项
a按钮里传值的方法，和JS里传值的方法不能是同一个方法。
如果都是mass_change,这样子会出现，明明传输到ids了，但是你始终拿不到ids的值的情况。
原因在于：
点击按钮后，先是sendids
()向mass_change 传入了ids值，你的后台显示能成功打印。
然后 a标签打开弹窗又重新调用了一次mass_change 。
相当于执行了两次mass_change方法，所以第一次传输的ids值，自然无法在第二次调用时使用。
打开的弹窗就无法获取到传输的ids了。
3.实现方法
如前面所说，既然会执行两次mass_change
(）方法，导致无法正常获取ids，那我就用写两个方法：
先在js里向另一个自定义后台方法get_mass
()传值，在get_mass方法里，将ids上传到数据表A中存储。
public function get_mass
($ids
){
$ids = rtrim
($ids,','
);
//这里因为我的版本过老，我删除了设置数据库的sql ，大家需要自己补上
$sql_table = "INSERT INTO mass_change_table
(id,ids
) VALUES
('NULL','$ids'
)";
$result = mysql_query
($sql_table,$db
);
if
($result
){
$this->success
('success'
);
}else{
$this->error
("请重试"
);
}
}
然后在从 mass_change里通过sql数据库，获取已经上传好的ids值，最后传值到弹窗中。
public function mass_change
() {
//这里因为我的版本过老，我删除了设置数据库的sql ，大家需要自己补上
$get_ids_sql = mysql_query
("SELECT ids from mass_change_table order by id desc limit 1",$db
);
$res = mysql_fetch_array
($get_ids_sql, MYSQL_ASSOC
); //获取ids
$ids = $res['ids'];
$this->assign
('ids',$ids
); //需要的ids
if
($this->_get
("navTabId"
)) { //导航值
$this->assign
("navTabId",$this->_get
("navTabId"
));
}
$this->display
();
}
然后最后在弹窗里提交，到mass_update（）里，
在mass_update
()里 获取已经填好的表单值（其中就有ids），进行批量更改操作。
这样整体就能实现到通过按钮打开弹窗，并获取选中的所有id，进行批量更改的操作了。
三、思路解释
为什么我会选择用三个方法，
第一个方法上传ids到数据库，第二个方法获取ids传递到弹窗，第三个方法进行批量sql操作呢？
原因在于，我发现当我想使用cookie或$SESSION 存储传输过来的ids，然后再让mass_change通过cookie或$SESSION拿值时，一直拿不到，都是null。个人猜测可能和两次调用导致的。（若有懂的大哥们，可在评论区指出我的错误）
所以最后我只能使用上传数据库，用数据库保存ids数据，在从数据库获取ids数据的笨方法。
四、优化后的最终解决方法（效率最高最有效）
从前面的注意事项就可看出，其实只要我们能解决掉以下问题：
（因为执行了两次mass_change方法，所以第一次传输的ids值，自然无法在第二次调用时使用。
打开的弹窗就无法获取到传输的ids了。）
就可以最有效的实现通过按钮打开弹窗，并获取选中的所有id，进行批量更改操作。
顺着这个思路走，我尝试不通过使用a标签里的
DWZ方法 targer=‘
dialog’ 来打开弹窗，而是直接使用 sendids（）的JS方法来调用
DWZ的弹窗。
这样就只会调用一次mass_change
()方法,可以直接在第一次就把拼接到的is传输到后台控制器中，直接获取id，不需要在使用目录二里的笨方法，写到数据库上，能有效提高效率和响应速度。
1.优化后的前端HTML代码
<div>
<li><a class="assign" href="javascript:void
(0
):" onclick="sendids
()"><span>批量更改</span></a></li>
</div>
<script>
function sendids
(){
//得到chekbox对象
var checkbox = document.getElementsByName
("ids"
);
var id ="";
//当选中时，拿到它的value值，并拼起来
//需要注意的是，这样拼出来的id字符串，是以 ","结尾的，所以在使用的时候，应先将 ","去掉，也可在if中做判断 ,当为最后一个时，拼的时候不加 ","
for
( var i = 0; i < checkbox.length; i++
) {
if
(checkbox[i].checked
){
id = id + checkbox[i].value+",";
}
}
// 判断是否为空
if
(!id
) {
alert
("请至少选择一个项目"
);
return ; // 停止函数执行
}
// 手动打开弹窗（使用
DWZ 的方式） 并传输拼接好的id
$.p
dialog.open
("__URL__/mass_change/ids/"+id+"/navTabId/{$module}", "mass_change", "批量更改QR", {
width: 600,
height: 400,
mask: true
}
);
return false; // 阻止
DWZ默认行为
}
</script>
2.优化后的后端代码
public function mass_change
() {
$ids = rtrim
($_REQUEST['ids'],','
);
$this->assign
('ids',$ids
); //传给mass_change页面
if
($this->_get
("navTabId"
)) {
$this->assign
("navTabId",$this->_get
("navTabId"
));
}
$this->display
();
}
public function mc_update
(){
$x= trim
($_POST['你想传输过来的字段名']
); // 看你自己要传什么数据
// 使用 explode 函数将字符串按逗号分割为数组,使用 implode 函数将数组重新组合为字符串,最后在前后加上引号。
$ids = "'" . implode
("','", explode
(",", $_POST['ids']
)) . "'";
$dbname = C
("数据库名"
);
$db=mysql_connect
(C
("DB_HOST"
), C
("DB_USER"
), C
("DB_PWD"
)) or die
("Can not connect mysql database." . mysql_error
());
MySQL_query
("SET NAMES 'utf8'"
);
mysql_select_db
($dbname,$db
) or die
("Could not select database"
);
$result = mysql_query
("update语句，直接使用 in 来批量更改，不需要用循环语句",$db
);
if
($result
){
$this->success
(L
("operation_success"
));
}else{
$this->error
('Error'
);
}
}
若对你有帮助，请帮忙点赞收藏，感谢！
请根据已编辑的文章内容，生成文章摘要
本文深入解析layoutH函数的工作原理，通过示例代码解释如何使用该函数来指定元素高度，以实现元素在不同场景下自适应调整高度的功能。特别适用于解决窗口和tab页中按钮显示不全的问题。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
