首页 前端知识 若依中jquey相关问题

若依中jquey相关问题

2024-02-28 11:02:41 前端知识 前端哥 612 89 我要收藏

1. 表格内改变input值不生效

 $('#bootstrap-table tr td input').on('change',function(e){
        var value = $(this).val();
        $(this).attr("value",value);
    });

2. 取表格当前行当前列

 $('#bootstrap-table tr td input').blur(function(e){
        var $this = $(this);
        var $td = $this.parent();
        var indextd = $td.index();
        if(indextd == '2'){
            var value = $(this).val();
            var fullName = pinyin.getFullChars(value);
            var $tr = $this.parent().parent();
            var index = $tr.data('index');
            $('#bootstrap-table'+' tr[data-index="' + index + '"] td:eq(3) input').attr("value",fullName);
        }
    });

3. input赋值

   $('#bootstrap-table'+' tr[data-index="' + index + '"] td:eq(3) input').attr("value",fullName);

4. input取值

  var value = $('#bootstrap-table'+' tr[data-index="' + index + '"] td:eq(3) input').attr("value");

5. json转字符串存到input框

                var json_t = [{
                    "title": "",
                    "name": "",
                    "datatype": "",
                    "params": "",
                }];
                var objJson= JSON.stringify(json_t).replace(/\"/g, "'");
                $('#bootstrap-table'+' tr[data-index="' + index + '"] td:eq(5) input').attr("value",objJson);

6. input框加显示隐藏事件

            $('#bootstrap-table'+' tr[data-index="' + index + '"] td:eq(6) a').hide();
            $('#bootstrap-table'+' tr[data-index="' + index + '"] td:eq(5) input').show();

7. input文本加onclick事件(尽量使用单引号)

{
                    align: 'center',
                    title: '操作',
                    formatter: function(value, row, index) {
                        var srow = JSON.stringify(row.params);
                        var objJson = srow.replace(/\"/g, "'");
                        if(row.datatype == 'Table') {
                            var html = $.common.sprintf('<a class="btn btn-info btn-xs" href="javascript:void(0)" οnclick="detail('+objJson+'\,'+index +'\,\''+row.title+'\')"><i class="fa fa-list-ul"></i>列表</a> ');
                            return html;
                        } else {
                            var html = $.common.sprintf('<a class="btn btn-info btn-xs" href="javascript:void(0)" style="display: none;" οnclick="detail('+objJson+'\,'+index +'\,\''+row.title+'\')"><i class="fa fa-list-ul"></i>列表</a> ');
                            return html;
                        }
                    }
                }

8. json传给后台get请求(注意转码)

 /*列表-详细*/
        function detail(row,index,title) {
            var tit = encodeURIComponent(title);
            var srow = encodeURIComponent(JSON.stringify(row));
            var url = prefix + '/detail/'+index+'?title='+tit+'&param='+srow;
            var options = {
                title: '列表模板',
                url: url,
                callBack: doSubmit
            };
            $.modal.openOptions(options);
            //$.modal.open("列表模板", url);
        }

9. 父子组件传值(与8一起看)

   function doSubmit(index, layero){
            var table = $.modal.getChildFrame(index).find("#bootstrap-table");
            var jsonTable=tableToJson(table);
            var parentId = $.modal.getChildFrame(index).find("#parentId").val();
            var title = $.modal.getChildFrame(index).find("#titleTable").val();
            var srow = JSON.stringify(jsonTable);
            var objJson = srow.replace(/\"/g, "'");
            $('#bootstrap-table'+' tr[data-index="' + parentId + '"] td:eq(5) input').attr("value",objJson);
            $('#bootstrap-table'+' tr[data-index="' + parentId + '"] td:eq(6) a').attr('onclick','detail('+objJson+'\,'+parentId +'\,\''+title+'\')');
            $.modal.close(index);
        }

10. 表格转json

  //表格转化成json
        function tableToJson(table) {
            var json = [];
            var rows = table.find("tr");
            for (var i = 1; i < rows.length; i++) {
                var row = rows.eq(i);
                var cols = row.find("td");
                var rowData = {};
                for (var j = 2; j < cols.length; j++) {
                    var col = cols.eq(j).children(':first');
                    if( cols.eq(j).find("a").length > 0 ){
                        continue;
                    }
                    var name = col.attr("name");
                    var value = col.attr("value");
                    if( cols.eq(j).find("select").length > 0 ){
                        value= col.find('option:selected').val();
                    }else{
                        if(name == 'params'&&cols.eq(4).find('option:selected').val() =='Table'){
                            var newstr = col.attr("value").replace(/'/g, '"');
                            value = JSON.parse(newstr);
                        }else{
                            value = col.attr("value");
                        }
                    }
                    rowData[name] = value;
                }
                json.push(rowData);
            }
            return json;
        }

11. 字符串转json

 var newstr = col.attr("value").replace(/'/g, '"');
 var value = JSON.parse(newstr);

12. 字符串转数字

var indexTable=[[${indexTable}]];
var titleTable=[[${titleTable}]];


 $("h4").html("序号"+(Number(indexTable)+1)+ ":" + titleTable);

13. 多个表格转多个json字符串数组

var html='<div class="row"><form id="'+content[i].name+'_from'+'" class="form-horizontal"><h4 class="form-header h4" style="margin-top: 25px">'+content[i].title+'</h4>\n' +
                    '            <div class="row">\n' +
                    '                <div class="col-sm-12">\n' +
                    '                    <button type="button" class="btn btn-white btn-sm" οnclick="addColumn('+i+'\,\''+content[i].name+'\')"><i class="fa fa-plus"> 增加</i></button>\n' +
                    '                    <button type="button" class="btn btn-white btn-sm" οnclick="sub.delColumn()"><i class="fa fa-minus"> 删除</i></button>\n' +
                    '                    <div class="col-sm-12 select-table table-striped">\n' +
                    '\t\t\t\t\t    <table id="'+content[i].name+'"></table>\n' +
                    '\t\t\t\t\t</div>\n' +
                    '                </div>\n' +
                    '            </div></form></div>';
$("#dataTable").append(html);

//先利用序列化转成json大数组,再取行数,使用group方法转成 数组
function doSubmit(index, layero){
    var data = $.modal.getChildFrame(index).find("#form-nodeproperty-edit").serializeArray();
    //alert(JSON.stringify(data));
    var propTemplate= JSON.parse(sessionStorage.getItem('propTemplate'));
    for (var x in propTemplate) {
        if(propTemplate[x].datatype=='Table'){
            var jsonTemp={};
            jsonTemp['name']=propTemplate[x].name;
            var fromTemp = $.modal.getChildFrame(index).find('#'+propTemplate[x].name+'_from').serializeArray();
            var rows = $.modal.getChildFrame(index).find('#'+propTemplate[x].name).find("tr");
            var groupedArray = group(fromTemp, fromTemp.length/(rows.length-1));
            var jsonArray=[];
            for (let i = 0; i < groupedArray.length; i++) {
                var json={};
                json['value']=groupedArray[i];
                jsonArray.push(json);
            }
            //alert(JSON.stringify(groupedArray));
            jsonTemp['values']=jsonArray;
            data.push(jsonTemp);
        }
    }
    var datajson={};
    datajson['id']=sessionStorage.getItem('nodeId');
    datajson['property']=JSON.stringify(data);
    $.modal.close(index);
    //保存编辑
    $.operate.save(prefix + "/edit", datajson, function(data) {
        $.modal.close(index);
    });
}

//一个数组转成多个
function group(array, subGroupLength) {
    let index = 0;
    let newArray = [];
    while(index < array.length) {
        newArray.push(array.slice(index, index += subGroupLength));
    }
    return newArray;
}

14. 给某个标签页添加html代码

 var html=' <div class="row"><div class="form-group">    \n' +
                    '                <label class="col-sm-3 control-label">'+content[i].title+':</label>\n' +
                    '                <div class="col-sm-8">\n' +
                    '                    <input name="'+content[i].name+'"  id="'+content[i].name+'" class="form-control" type="text">\n' +
                    '                </div>\n' +
                    '            </div></div>';
$("#form-nodeproperty-edit").append(html);

15. 回显表格内容

  var options = {
                    id: content[i].name,
                    data: data,
                    pagination: false,
                    showSearch: false,
                    showRefresh: false,
                    showToggle: false,
                    showColumns: false,
                    sidePagination: "client",
                    columns: columns
                };
$.table.init(options);
var propertyValue= JSON.parse(sessionStorage.getItem('property'));
        if(propertyValue!=null){
            for(var i in propertyValue){
                if(propertyValue[i].value==null||propertyValue[i].value==undefined){
                    if(propertyValue[i].values!=null&&propertyValue[i].values!=undefined){
                        //回显表格内容
                        var dataTemp = [];
                        for(var k in propertyValue[i].values){
                            var dataJsonTemp = {};
                            for (var a  in content) {
                                if(content[a].datatype =="Table"&&content[a].name==propertyValue[i].name){
                                    for(var b in content[a].params){
                                        dataJsonTemp[content[a].params[b].name]="";
                                    }
                                }
                            }
                            for(var j in propertyValue[i].values[k].value){
                                let name=propertyValue[i].values[k].value[j].name
                                let value=propertyValue[i].values[k].value[j].value
                                dataJsonTemp[name]=value;
                            }
                            dataTemp.push(dataJsonTemp);
                        }
                        $('#'+propertyValue[i].name).bootstrapTable('load',dataTemp);
                    }
                }
                $("#"+propertyValue[i].name).val(propertyValue[i].value);
            }
        }
转载请注明出处或者链接地址:https://www.qianduange.cn//article/2905.html
标签
jsonbootstrap
评论
会员中心 联系我 留言建议 回顶部
复制成功!