继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

JavaScript系列:项目中遇到的一些问题

素小暖
关注TA
已关注
手记 57
粉丝 171
获赞 888
  • 多选框选中问题
$(comment).each(function(key,value){
    if(value!=""){
        var checkBox = $("#comment").find("input[value="+value+"]");
        checkBox.attr("checked","checked");
    }
})
  • jqgrid编辑页面分列显示
formoptions:{rowpos:9,colpos:1}
  • extend函数处理json合并
a = {"foo":"bar","data":{"id","1"}};
b = {"x":"y"};
sum = $.extend(a,b);
=>sum =  {"foo":"bar","data":{"id","1"},"x":"y"};
  • 清空数据
$("#inform span").text("");
$("inform").attr("data-oper","fresh");
$("#favor").empty;
$("#reseavation").jqgird('GridUnload');
  • 防止form表单自动刷新
<form action = "javascript:void(0);">
  • 按钮点击可能触发多次,需释放绑定事件
$("#btnEdit").unbind("click");
  • jqgrid选中行

获取当前列表行数

$("#gridId").getGridParam("reccount");

获取选中行数据

(json):$("#gridId").jqgrid('getRowData',id);

刷新列表

$(refreshSelector).jqGrid('setGridParam',{url:'',postData:''}).trigger('reloadGrid');

选中行

$("#jqGrid").setSelection("1",true);

获取选中行id

var rowid = $("#jqgrid").jqGrid('getGridParam','selrow')
  • editable.js
    源代码 jquery.modal.ar_posting_edit.js
  • jquery操作select2控件
    jQuery为select控件增加、删除事件
    change/unbind
    获取选中项的相关属性
var selectText = $("#select_id").find("option:selected").text();
var selectValue = $("#select_id").val();
获取select选择的索引值
var selectIndex = $("#select_id").get(0).selectedIndex;

jquery设置select选中项

$("#select_id option[text = 'jquery']").attr("selected",true);

jquery添加、删除option项

$("#select_id").append('<option value='1'>Text</option>');
$("#select_id").prepend('<option value='0'>请选择</option>');
$("#select_id option:last).remove();
  • xhEditor用法
    下载xhEditor最新版本
    解压压缩文件
    jquery-1.4.2min.js
    xheditor-zh-cn.min.js
    三个文件拷贝到项目的相应目录下
    xheditor_emot
    xheditor_plugins
    xheditor_skin
    调用方法
    在textarea中加入class = "xheditor{skin:'default'}"
$("#helpJson").each(function(k,v){
   var i = v.FCode.substr(v.Fcode.length-1,1);
  $("#frmList").find("#viewImg"+i).attr('src',"../../../image/"+v.FPicName);
})
  • serializeArray()方法
输出以数组形式序列化表单
var fields = $("select,:radio").serializeArray();
jquery.each(fields,function(i,field){
        $("#results").append(field.value+"");
});
$("form").submit(function(event){
    console.log($(this).serializeAaary());
})
数组形式的键值对
var dataJson = sysname2json($("#Form").serializeArray());
for(var k in dataJson){
    $("#"+k).val(dataJson[0][k])
}
  • 获取选中行数据 选其中的一个字段 并塞数组里
var ids = $("#ho_ledger").jqGrid("getGridParam",selarrow);
var selectRow = [];
$(ids).each(function(key,value){
    var dcode = $("#ho_ledger").jqGrid("getRowData",value).dcode;
    selectRow.push(dcode);
})

获取jqgrid全部数据 并替换其中部分字段

var jqgridData = $("#ho_gledger").jqgrid("getRowData");
var selectRow = [];
$(jqGridData).each(function(key,value){
    var  jqgridData_true = {};
    a.dcode = value.dcode;
    a.text = value.text;
    selectRow[key] = a;
})
  • jqgrid统计行
footerrow:true,
gridComplete:function(){
    $(".ui-jqgrid-sdiv").show();
    var amount =         
    jquery(grid_selector).getCol('amount',false,'sum').toFixed(2);
    jquery(grid_selector).footerData("set",{amount:amount})
}
  • iframe插件
    引入2个js
    jquery.tools.hsmodel.js
    jquery.bootstrap.modalFrame.js
定义data-for属性
$("[data-for='delivery']").modalFrame("init",function(modalEle){
    $("[data-for = 'delivery']").data("modalEle",modalEle);
});
$("[data-for = 'delivery']").bind("click",function(){
        var modalEle = $("[data-for = 'delivery']").data("modalEle");
        $(this).modalFrame("show");
        $("#modalFrame").diliveryLoading({
        FGuid:grid_selectRow.FGuid;
        returnBack:function(){
            $("#"+modalEle).modal("hide");
            $("#"+modalEle).empty();
        } ,
        dataBack:fucntion(){
            ...
        } 
    })
})

写modal插件

  • prop()方法设置或返回被选元素的属性和值
返回属性的值
$(selector).prop(property);
设置属性和值
$(selector).prop(property,value);
使用函数设置属性和值
$(selector).prop(property,function(index,currentValue));
移除
removeProp();
返回所有的复选框
$("input:checkBox").prop("checked",function(index,oldValue){
       return !oldValue;
})
打开App,阅读手记
2人推荐
发表评论
随时随地看视频慕课网APP