关于js的总结

1、如何选出所有选中的checkbox

var $selDes = $('.result-table tbody').find("input:checked");

2、删除单元格中的某一行：

这里是如果某一行中的input被选中，则将该行删除。

$selected.each(function (i,item) {       $(this).closest('tr').remove();})

3、定义变量时，一般最好赋予初始值

4、不到万不得已，不要在事件内部再绑定事件，这样会造成重复绑定。

5、

比如说有<tr><td><input type="checkbox"/></td>userid<td></td></tr>如果input被选中，则取出这一行的userid.最好的做法是，在利用freemarker模板的情况下，可以这样写：

 

<td><input type="checkbox" class="d-choose d-checked" data-pid="${expert.obsUserId!''}"></td><td><a class="userid" href="http://10.1.2.142/u/${expert.obsUserId!''}" target="blank" >${expert.obsUserId!''}</a></td>

利用data-pid。然后在遍历的时候取出pid:
 

$selected = $('.result-table tbody').find('input:checked'); $selected.each(function (i,item) {        userids += $(this).data('pid') + ','; });

 6.关于禁用按钮的情况

例如：有一个删除按钮，当有type为checkbox的input被选中时，该按钮才可以点击，否则不可点击。

 我的做法是：每次有checkbox的状态被改变时，先判断下当前有没有checkbox被选中,有则为该按钮添加一个类名，没有则移除该类名。
 在添加的类名上为删除按钮添加点击事件和相应的样式
 代码如下：
 

$('.d-checked').on('change', function() {            var $self = $(this);            var $selDes = $('.result-table tbody').find("input:checked");            if ($selDes.length === 0) {                $('.cancel-btn').addClass('disabled');                $('.cancel-btn').removeClass('del-btn');            } else {                $('.cancel-btn').removeClass('disabled');                $('.cancel-btn').addClass('del-btn');            }             });

添加对应的鼠标样式

 .result .disabled {    cursor:not-allowed;}.result .del-btn{    cursor:pointer;}

7、在url中拼接字符串时，可以写一个通用的函数

例如：

function getParams(arr){            var province = $province.val() || -1,                city = $city.val() || -1,                level = $level.val() || -1,                minScore = $minScore.val() || -1,                 maxScore = $maxScore.val() || -1,                serviceareaid = $serviceCity.find('option:selected').val() || $serviceProvince.find('option:selected').val() || -1,                serviceStatus = $serviceStatus.val() || -1;//下面的判断是：只拼接用户填写的内容，没有填写的内容则不进行拼接。            if( province > 0){                arr.push('province=' + province);            }            if(city > 0){                arr.push('city=' + city);            }            if(minScore > -1) {                arr.push('minscore=' + minScore);            }            if(maxScore > -1) {                arr.push('maxscore=' + maxScore);            }            if(serviceareaid >0) {                arr.push('serviceareaid=' + serviceareaid);            }            if(serviceStatus > -1) {                arr.push('servicestatus=' + serviceStatus);            }            return true;        }

然后将数组中的内容用&拼接

$('.d-screen').on('click', function() {    if(!getParams(paramArr)){        return;    }    location.href = '/expert/search' + (paramArr.length > 0 ? ('?' + paramArr.join('&')) : '');})

 8、关于freemarker的使用

 利用freemarker时，因为之前不太会用，所以遇到了一个问题，就是发送请求之后，页面会被刷新，填入的选项都会变成默认值。
 其实可以让后台把参数利用freemarker返回来，然后填充到对应的选项中。
 如下：
<#assign param = "">
        <#if searchparam??>
            <#assign param = param + '&searchparam' + searchparam>
        </#if>
        <#if province??>
            <#assign param = param + '&province=' + province>
        </#if>
        <#if city??>
            <#assign param = param + '&city=' + city>
        </#if>
        <#if minscore??>
            <#assign param = param + '&minscore=' + minscore>
        </#if>
        <#if maxscore??>
            <#assign param = param + '&maxscore=' + maxscore>
        </#if>
        <#if serviceareaid??>
            <#assign param = param + '&serviceareaid=' + serviceareaid>
        </#if>
        <#if servicestatus??>
            <#assign param = param + '&servicestatus=' + servicestatus>
        </#if>

如果是type为text的input,写法如下：
 

<input type="text" placeholder="最小值" class="context min-score" value="${minscore!''}">

 如果是下拉框：

 <select class="o-service-status">           <option value="-1" selected>不限</option>         <option value="0"  <#if servicestatus?? && servicestatus == 0>selected</#if> >未抢单</option>         <option value="1"  <#if servicestatus?? && servicestatus == 1>selected</#if> >抢单中</option>         <option value="2"  <#if servicestatus?? && servicestatus == 2>selected</#if>>接单中</option> </select>

 如果是动态生成的下拉框:
 

 <select  id="d-province" class="city j-province" data-pid="${province!''}">

js的处理如下：

         $.each(provinces, function(i, el){                if (el.id == pId) {                    strSelect = ' selected="selected" ';                    initCity(el.cities, cId);                } else {                    strSelect = '';                }                tmpl = '<option value="' + el.id + '" '+ strSelect+'>' + el.name + '</option>';                ret.push( tmpl );            })

freemarker实现的翻页按钮如下：

   <ul class="pagination page-break">            <#if page gt 1>            <li class="pl">                <a href="/expert/search/${page-1}?${param}" class="p-btn p-btn-pre btn btn-primary">上一页</a>            </li>            </#if>            <li>                <div class="cur"><span class="cur-num">${page!''}</span>/<span class="total-num">${pageNum!''}</span></div>            </li>            <#if page lt  pageNum  >            <li>                <a href="/expert/search/${page+1}?${param}" class="p-btn p-btn-next btn btn-primary">下一页</a>            </li>            </#if>        </ul>