码迷,mamicode.com
首页 > 其他好文 > 详细

页面常用脚本

时间:2018-07-11 19:52:04      阅读:220      评论:0      收藏:0      [点我收藏+]

标签:key   form   ict   cache   nfa   function   select   位置   失败   

使用列标题定位并搜索

公用js

common.js

技术分享图片
function input_text_addSearchPre(modeId, targetId, selectId, valueId) {
    $("#" + valueId).attr("onkeydown", "if(event.keyCode==13){event.keyCode=0;event.returnValue=false;input_text_addSearchPost(‘" + modeId + "‘,‘" + targetId + "‘,‘" + selectId + "‘,‘" + valueId + "‘);}")
}
function input_text_addSearchPost(modeId, targetId, selectId, valueId) {
    var model = $("#" + modeId + " option:selected").val();
    var colPo = $("#" + selectId + " option:selected").val();
    var value = $("#" + valueId).val();
    var tds = $("#" + targetId + " tr").find("td:eq(" + colPo + ")");
    $.each(tds, function() {
        if (model == 0) {
            if ($(this).text().indexOf(value) >= 0) {
                $(this).parent("tr").show();
            } else {
                $(this).parent("tr").hide();
            }
        } else if (model == 1) {
            if ($(this).text().indexOf(value) < 0) {
                $(this).parent("tr").hide();
            }
        }
    });
}
View Code

页面js

技术分享图片
<script
   type="text/javascript"
   src="/ChargingSystem/js/common.js"></script>
<script type="text/javascript">
    function select_selectColPo_onmouseover() {
        var tds = $("#thead_userRepository td");
        $("#select_selectColPo option[value=‘temp‘]").remove();
        for (var i = 0; $("#select_selectColPo option").length < tds.length && i < tds.length; i++) {
            $("#select_selectColPo").append("<option value=\""+i+"\">" + $("#thead_userRepository td").eq(i).text() + "</option>");
        }
    }
    $(document).ready(function() {
        input_text_addSearchPre("select_modeSelect", "tbody_userRepository", "select_selectColPo", "input_text_searchValue");
    })
</script>
View Code

参考用例

技术分享图片
      <select
         id="select_modeSelect"
         style="width: 100px; height: 100%;"
         onmouseover="select_modeSelect_onmouseover()">
         <option value="temp">模式</option>
         <option value="0">平行</option>
         <option value="1">递进</option>
      </select>
      <select
         id="select_selectColPo"
         style="width: 100px; height: 100%; margin-left: 0px;"
         onmouseover="select_selectColPo_onmouseover()">
         <option value="temp">位置</option>
      </select>
      <input
         id="input_text_searchValue"
         type="text"
         style="width: 200px; height: 21px; margin-left: 0px;" />
View Code

使用列标题定位并排序

页面js

技术分享图片
<script type="text/javascript">
    function thead_tr_td_onclick(colPo) {
        var tds = $(".tr_tbody_userRepository").find("td:eq(" + colPo + ")");
        var tdA = $(tds).eq(0).text().trim();
        var tdB = $(tds).eq(1).text().trim();
        var ascORdesc;
        if (tdA.length > tdB.length) {
            ascORdesc = 1;
        } else if (tdA.length < tdB.length) {
            ascORdesc = -1;
        } else if (tdA > tdB) {
            ascORdesc = 1;
        } else {
            ascORdesc = -1;
        }
        tbody_userRepository_sort(colPo, ascORdesc);
    }
    function tbody_userRepository_sort(colPo, ascORdesc) {
        var trs = $("#tbody_userRepository tr");
        trs.sort(function(a, b) {
            var tdA = $(a).children("td").eq(colPo).text().trim();
            var tdB = $(b).children("td").eq(colPo).text().trim();
            if (tdA.length > tdB.length) {
                return ascORdesc;
            } else if (tdA.length < tdB.length) {
                return ascORdesc * (-1);
            } else if (tdA.length == tdB.length) {
                return (tdA > tdB) ? ascORdesc : ascORdesc * (-1);
            }
        })
        $("#tbody_userRepository").append(trs);
        for (var i = 0; i < $(".td_userRepository_indexCol").length; i++) {
            $(".td_userRepository_indexCol").eq(i).text(i + 1);
        }
    }
</script>
View Code

参考用例

技术分享图片
         <thead id="thead_userRepository">
            <tr>
               <td
                  style="width: 100px; cursor: pointer;"
                  onclick="thead_tr_td_onclick(‘0‘)">序号</td>
               <td
                  style="width: 400px; cursor: pointer;"
                  onclick="thead_tr_td_onclick(‘1‘)">用户ID</td>
               <td
                  style="width: 200px; cursor: pointer;"
                  onclick="thead_tr_td_onclick(‘2‘)">联系方式</td>
               <td
                  style="cursor: pointer;"
                  onclick="thead_tr_td_onclick(‘3‘)">地址</td>
               <td
                  style="width: 100px; cursor: pointer;"
                  onclick="thead_tr_td_onclick(‘4‘)">是否欠费</td>
               <td
                  style="width: 100px; cursor: pointer;"
                  onclick="thead_tr_td_onclick(‘5‘)">动作</td>
               <td
                  style="width: 100px; cursor: pointer;"
                  onclick="thead_tr_td_onclick(‘6‘)">阀状态</td>
               <td
                  style="width: 100px; cursor: pointer;"
                  onclick="thead_tr_td_onclick(‘7‘)">余额</td>
               <td
                  style="width: 100px; cursor: pointer;"
                  onclick="thead_tr_td_onclick(‘8‘)">应交费用</td>
               <td
                  style="width: 100px; cursor: pointer;"
                  onclick="thead_tr_td_onclick(‘9‘)">数额</td>
               <td
                  style="width: 100px; cursor: pointer;"
                  onclick="thead_tr_td_onclick(‘10‘)">操作</td>
            </tr>
         </thead>
View Code

Ajax异步请求

返回普通String

关键部分

技术分享图片
            var form_loginORregister = new FormData($("#form_loginORregister")[0]);
            $.ajax({
                url : "/ChargingSystem/entrance/register.do",
                type : "POST",
                data : form_loginORregister,
                async : true,
                cache : false,
                contentType : false,
                processData : false,
                success : function(returndata) {
                    if (returndata == "myTrue") {
                        alert("注册成功");
                        window.location.reload();
                    } else {
                        alert("注册失败");
                        window.location.reload();
                    }
                }
            })
View Code

返回Json

关键部分

技术分享图片
            var form_userInfANDaccountInf = new FormData($("#form_userInfANDaccountInf")[0]);
            var myUrl = parseInt("${operator.jurisdiction}") >= 2 ? "/ChargingSystem/admin/update.do" : "/ChargingSystem/user/update.do"
            $.ajax({
                url : myUrl,
                type : "POST",
                data : form_userInfANDaccountInf,
                async : true,
                cache : false,
                contentType : false,
                processData : false,
                dataType : "JSON",
                success : function(user) {
                    console.log(user);
                    tbody_historys_sort(4, 1);
                    $("#input_text_address").val(user.address);
                    var latestH = user.historys[0];
                    var nLi = parseInt($(".td_historys_indexCol:last").text().trim()) + 1;
                    var td1 = "<td id=\"td_historys_index_"+nLi+"\" class=\"td_historys_indexCol\" style=\"text-align: center;\">" + nLi + "</td>";
                    var td2 = "<td class=\"td_historys_Cid\" style=\"display: none;\">" + latestH.customId + "</td>";
                    var td3 = "<td>" + latestH.specification + "</td>";
                    var td4 = "<td>" + latestH.value + "</td>";
                    var td5 = "<td style=\"text-align: center;\">" + latestH.operate + "</td>";
                    var td6 = "<td style=\"text-align: center;\">" + (latestH.remark == null ? "" : latestH.remark) + "</td>";
                    var trL = "<tr>" + td1 + td2 + td3 + td4 + td5 + td6 + "</tr>";
                    $("#tbody_historys").append(trL);
                    tbody_historys_sort(4, 1);
                    alert("已更新");
                },
                error : function() {
                    alert("登陆过时,请重新登陆");
                }
            })
View Code

 

页面常用脚本

标签:key   form   ict   cache   nfa   function   select   位置   失败   

原文地址:https://www.cnblogs.com/suheng/p/9295824.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!