关于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>