jquery layui 传递json格式到后台

本文介绍了一种使用jQuery进行权限分配的方法,通过POST请求将角色ID、功能ID、功能代码等参数发送到服务器,实现对功能权限的动态分配。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

jQuery 方式:

  postdata.push({
                        "RoleId": Id,
                        "FuncId": _funcId,
                        "FuncCode": funccode,
                        "FuncType": $(this).val(),
                        "DeptIds":$(this).val() !== 2 && $(this).val() !=="2"?0:$("input[name=modeIds_" + _funcId + "]").val(),
                        "ModeId": modeId
                        
                    });

$.post('/System/Role/AllotFuncPermssion', { rolePermissions: postdata}, function (res)
                {
                    layer.msg("操作成功!");
                });

 

转载于:https://www.cnblogs.com/daiyekun-blog/p/10488554.html

<think>我们在Layui框架中,当使用数据表格(table)的模板(templet)功能时,经常会遇到需要在下拉框(select)中动态加载后台选项数据的需求。根据引用[1]和引用[2]的思路,我们可以这样实现:1.在表格的列模板中,使用自定义模板(templet)来生成下拉框,并给下拉框设置一个特定的class,同时利用LAY_INDEX(行索引)来确保每个下拉框的唯一性。2.在表格渲染完成后,通过异步请求(例如使用jQueryLayui的form)获取下拉框的选项数据,然后根据下拉框的class和行索引来动态填充选项。具体步骤:步骤一:定义表格的列模板在列配置中,使用templet属性,编写一个字符串模板,该模板生成一个下拉框,并给这个下拉框一个class(比如'dynamic-select'),同时我们利用LAY_INDEX作为class的一部分,确保每个下拉框可以独立定位。例如:```javascriptcols:[[//...其他列{field:'cate_id',title:'文章分类',templet:function(d){return'<selectclass="dynamic-selectselect-'+d.LAY_INDEX+'"name="cate_id"lay-verify="required"lay-filter="selectFilter"><optionvalue="">请选择</option></select>';}}]]```步骤二:在表格渲染完成后,异步获取下拉框数据并填充在表格渲染完成的回调函数(done)中,我们可以遍历每一行,为每个下拉框发送请求获取数据并填充。例如:```javascript,done:function(res,curr,count){//遍历每一行$.each(res.data,function(index,item){varselectClass='.select-'+index;//注意:这里使用行索引index,即LAY_INDEX$.ajax({url:'/getCateOptions',dataType:'json',success:function(data){varselect=$(selectClass);//填充数据$.each(data,function(i,opt){select.append('<optionvalue="'+opt.id+'">'+opt.name+'</option>');});//注意:由于是动态添加,需要重新渲染表单layui.form.render('select');}});});}```但是,上面的方法可能会因为行数多而导致请求过多(每行都发一次请求),所以我们也可以只发送一次请求,获取所有选项数据,然后填充到每一行的下拉框中(如果每行的下拉框选项都是一样的)。如果每行的下拉框选项相同,可以这样优化:```javascript,done:function(res,curr,count){//只获取一次数据$.ajax({url:'/getCateOptions',dataType:'json',success:function(data){//遍历每一行$.each(res.data,function(index,item){varselect=$('.select-'+index);//填充数据$.each(data,function(i,opt){select.append('<optionvalue="'+opt.id+'">'+opt.name+'</option>');});//设置当前行的值(如果需要)select.val(item.cate_id);//如果该行数据中有分类id,可以设置选中});//统一重新渲染表单layui.form.render('select');}});}```注意:如果每行的下拉框选项不同,那么我们需要根据该行的数据来传递参数,然后请求该行对应的下拉数据。此外,引用[2]中提到了使用模板引擎(如laytpl)预定义模板的方法,我们也可以事先定义一个模板,然后在templet函数中通过模板引擎渲染,但是这种方式也是需要在模板渲染前获取数据,所以同样需要在done回调中处理。另一种方法:在templet函数中直接发起请求(不推荐,因为会多次请求且难以控制顺序)综上所述,推荐使用在done回调中统一处理下拉框数据填充。另外,注意在填充完下拉框后,需要调用`layui.form.render('select')`重新渲染表单,否则下拉框样式不会生效。注意事项:1.由于异步加载数据,可能存在填充下拉框时用户已经开始操作的情况,因此需要考虑用户体验,比如先显示加载中或统一等待所有下拉框加载完毕再允许用户操作。2.如果数据量较大,每行的下拉框数据又不同,那么需要优化请求方式,比如在初始化表格之前就获取所有需要的下拉数据(包括所有行对应的下拉数据),然后统一填充。根据引用[1][2][3]的参考,我们也可以结合laytpl模板引擎,但是思路大致相同。下面给出一个结合laytpl模板的示例(需要提前准备好模板,并且请求数据在模板渲染时已经存在):步骤一:定义模板(如引用[2]的方式)```html<scripttype="text/html"id="selectTpl"><selectname="cate_id"lay-verify="required"><optionvalue="">请选择</option>{{#layui.each(d,function(index,item){}}<optionvalue="{{item.id}}">{{item.name}}</option>{{#});}}</select></script>```步骤二:在列配置的templet函数中,使用该模板,但是这里的问题是,如何为每一行传递不同的数据?我们无法在templet函数中为每一行发起异步请求,所以这种方法适用于在表格渲染前就已经获取了每一行下拉框所需数据的情况。因此,如果每行的下拉框选项不同,并且数据量不大,可以在表格渲染前就请求所有行的下拉数据(按行id为key组织),然后在templet函数中直接获取该行对应的下拉数据并渲染模板。这样实现:1.在渲染表格之前,先获取表格数据,同时为每一行获取(或已经包含)下拉框数据(可以合并到一个请求里,返回的数据结构中包含每一行的下拉框数据)。2.列配置中:```javascript{field:'cate_id',title:'分类',templet:function(d){//d是当前行数据,假设d.selectOptions就是该行下拉框的选项数组returnlaytpl($('#selectTpl').html()).render(d.selectOptions);}}```这种方式要求表格数据源里已经包含了下拉框的选项数据,所以需要在后端将数据组织好。总结:根据实际需求选择方式:1.如果每行下拉框数据相同,可以在done回调中统一请求一次数据,然后填充下拉框并重新渲染表单。2.如果每行下拉框数据不同,且数据量不大,建议在表格数据中直接包含下拉框的选项数据(即每行数据中增加一个字段,如selectOptions,用于存放该行下拉框选项),然后通过模板渲染。3.如果每行下拉框数据不同,且数据量较大,那么考虑在表格数据中先不包含下拉数据,而是在表格渲染后,根据行数据中的关键字段(如id)批量请求下拉数据(例如一次请求入所有行的关键字段),再填充。方法三的示例:在done回调中,收集所有行的关键字段,发起一个批量请求,获取所有下拉数据(返回的数据结构为{rowId1:[options1],rowId2:[options2],...}),然后填充对应行的下拉框。代码示例:```javascriptdone:function(res,curr,count){//收集所有行的idvarrowIds=[];$.each(res.data,function(index,item){rowIds.push(item.id);});//批量请求下拉数据$.ajax({url:'/getSelectOptionsBatch',type:'post',data:{ids:rowIds},dataType:'json',success:function(data){//遍历每一行,填充下拉框$.each(res.data,function(index,item){varoptions=data[item.id];varselect=$('.select-'+index);$.each(options,function(i,opt){select.append('<optionvalue="'+opt.id+'">'+opt.name+'</option>');});//设置当前值if(item.cate_id){select.val(item.cate_id);}});//重新渲染表单layui.form.render('select');}});}```请根据实际项目情况选择合适的方式。§§相关问题§§1.如何防止layuitable中动态下拉框多次重复加载数据?2.如何实现layuitable中下拉框选项变化时的联动操作?3.在layui表格中使用下拉框时,如何绑定下拉框选择事件并获取选中值?</think> 在 Layui 框架中,通过 `table` 模板的 `select` 功能动态加载后台选项数据的方法如下: ### 方法实现步骤 #### 1. **前端模板定义**(参考引用[2]) 在 HTML 中定义下拉框模板,使用 Layui 的模板语法: ```html <script type="text/html" id="selectTemplate"> <select name="category" lay-filter="dynamicSelect"> <option value="">请选择分类</option> {{# layui.each(d, function(index, item){ }} <option value="{{ item.id }}">{{ item.name }}</option> {{# }); }} </select> </script> ``` #### 2. **表格列配置** 在表格初始化时,通过 `templet` 字段关联模板,并动态生成 class 标识: ```javascript table.render({ elem: '#dataTable', cols: [[ {field: 'id', title: 'ID'}, {field: 'category', title: '分类', templet: function(d){ return '<select class="dynamic-select-' + d.LAY_INDEX + '" lay-filter="dynamicSelect"></select>'; }} ]], done: function(res, curr, count){ // 遍历每行数据,动态加载选项 res.data.forEach(function(item, index) { loadOptions('dynamic-select-' + index, item.id); // 传递行标识和参数 }); } }); ``` #### 3. **动态加载选项**(核心逻辑,参考引用[1]) 通过 AJAX 获取后台数据,并填充下拉框: ```javascript function loadOptions(className, rowId) { $.ajax({ url: '/api/getOptions', // 后台接口 data: { rowId: rowId }, // 传递行标识参数 success: function(res){ if(res.code === 0) { const $select = $('.' + className); // 填充选项 res.data.forEach(option => { $select.append(`<option value="${option.id}">${option.name}</option>`); }); // 重新渲染表单(关键步骤) layui.form.render('select'); } } }); } ``` #### 4. **表单重新渲染**(必须步骤) 在数据填充后,必须调用 `layui.form.render()` 更新 UI: ```javascript layui.use(['form'], function(){ var form = layui.form; form.render('select'); // 重新渲染所有下拉框 }); ``` ### 关键细节说明 1. **行级标识** 使用 `LAY_INDEX` 或自定义数据生成唯一 class(如 `dynamic-select-{{d.LAY_INDEX}}`),确保每行下拉框独立操作。 2. **数据关联** 通过 `item.id` 向后台传递行标识参数,获取对应的动态数据。 3. **渲染时机** 必须在 `table.done` 回调中执行加载逻辑,确保 DOM 已渲染完成。 4. **表单更新** 动态添加选项后必须调用 `form.render()`,否则样式和功能不会生效。 5. **交互优化** 添加加载状态提示: ```javascript $select.html('<option value="">加载中...</option>'); form.render('select'); ``` ### 后台接口示例 (PHP) ```php // /api/getOptions public function getOptions(Request $request) { $rowId = $request->input('rowId'); $options = DB::table('options') ->where('row_id', $rowId) ->get(); return json_encode(['code' => 0, 'data' => $options]); } ``` ### 效果演示 ![](https://example.com/demo.gif) *图示:表格中每行下拉框独立加载后台数据[^1]* ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值