easyui.utils.js 自己封装的 使用easyui过程中方便操作和取值(一)

来源:互联网 发布:格力壁挂空调 r32知乎 编辑:程序博客网 时间:2024/06/07 03:06

注意:该easyui.utils.js  会在我自己使用过程中不断完善,大家一起进步。

在js上添加 以下

(function($){

  function  其他方法。


})(jQuery);

的目的是为了防止该js文件中的function与浏览器本身的一些function有冲突。

这种方式叫做壁包。

当一个.ftl 或者其他的html文件引入该js文件后。在其他文件中也想使用本JS文件文件中的function时,会发现改方法无法使用。造成该错误的原因是因为添加了上面的壁包操作。  可以在该js文件中加入

    window.onSelectAllListener = onSelectAllListener;
    window.onUnselectListener = onUnselectListener;
    window.onSelectListener = onSelectListener;

方便其他js中间使用本js文件中的方法。


(function($){

    
    /**
     * 使用easyui 过程中会用到 datagrid的数据表格。那么在数据表格中有时候会添加针对id的选择框,以便在 进行删除或者其他操作的时候,可以获取到选中行数的ID值。
     * 使用以下方法可以方便对所有单击事件进行管理。在进行其他操作的时候 所有的数据都存放在
     *     <input id="award_id" name="award_id" type="hidden"></input>    
     * 中,直接
     *                 var ids = $('#award_id').val();
                    if(ids == ""){
                        alert("请选择数据!");
                    }else{
                        alert(ids);
                    }
         接可以获取到所有选中的  id。
     *
     * award_list.ftl 中含有
     *列表数据
     *  <table id="awards_load">
        </table>
        存放所有选中id的隐藏  input
        <div id="hide_div" closed="true">
            <input id="award_id" name="award_id" type="hidden"></input>                
        </div>
        对应的award_list.js中进行数据加载
        $(document).ready(function() {
        
        /**
         * 图片格式化
         */
        /**
            function  image(value, rec){
                if(value != "" && value != null){
                    return "<img style=\"height: 80px;width: 80px;\" src=\""+value+"\"/>";
                }else{
                    return "<img style=\"height: 80px;width: 80px;\" src='.'/>";;
                }
                
            };
        *
         */
        /**
         * 数据操作
         */
            /**
                var toolbar = [{
                    text:'添加新商品',
                    iconCls: 'icon-add',
                    handler: function(){
                        alert("添加商品!");
                    }
                },'-',{
                    text:'删除',
                    id:'delete',
                    iconCls:'icon-cut',
                    handler:function(){
                        var ids = $('#award_id').val();
                        if(ids == ""){
                            alert("请选择数据!");
                        }else{
                            alert(ids);
                        }
                        
                    }
                }];
         *
         */
        /**
         * 加载数据
         */
        /**
    
            $('#awards_load').datagrid({
                title : '基础商品列表 ',
                height: 750,
                fitColumns: true,
                url : 'awards',
                idField:'id',
                singleSelect: false,
                rownumbers: true,
                pagination: true,
                nowrap: false,
                pageSize: 10,
                pageList: [10, 20, 50, 100, 150, 200],
                showFooter: true,
                striped: true,
                autoRowHeight: false,
                collapsible: true,
                frozenColumns:[[
                     { field: 'id',checkbox: true },
                     { field: 'name', title: '奖品名称', width: 100, align: 'center'},
                ]],
                columns: [[
                   {title:'详细信息',colspan:4},
                   { field: 'picUrl', title: '图片', width: 120, align: 'left', rowspan:2,formatter:image},
                ],[
                   { field: 'memo', title: '奖品描述', width: 80,align: 'center' },
                   { field: 'typeDesc', title: '奖品类型', width: 50, align: 'center' },
                   { field: 'score', title: '兑换积分', width: 50,align: 'center' },  
                   { field: 'statusDesc', title: '状态', width: 50, align: 'center' },
                ]],
                toolbar:toolbar,
                loadFilter:function(result) {
                    if(result.success){
                        return result.data;
                    }
                },
                onDblClickRow:function(rowIndex,rowData){
                    $('#edit_award_form').form('load','get_award_by_id?id='+rowData.id)
                },onSelect:function(rowIndex,rowData){
                    
                    var inputId = "award_id";
                    onSelectListener(inputId,rowData);
                    
                },onUnselect:function(rowIndex,rowData){
                    
                    var inputId = "award_id";
                    onUnselectListener(inputId,rowData);
                    
                },onSelectAll:function(rows){
                    
                    var inputId = "award_id";
                    onSelectAllListener(inputId,rows);
                    
                },onUnselectAll:function(rows){
                    $('#award_id').val("");
                }
        
            });
        
         * **/
        /**
            
            });
     *
     *
     *
     * <div id="hide_div" closed="true">
     *     <input id="award_id" name="award_id" type="hidden"></input>                
     * </div>
     */
    
    /**
     *         var oldId = $('#award_id').val();
            if(oldId != ""){
                var newId = oldId + "," + rowData.id;
                $('#award_id').val(newId);
            }else{
                $('#award_id').val(rowData.id);
            }
            当在 datagrid  中 添加onSelect事件后
            onSelect:function(rowIndex,rowData){
                    
                    var inputId = "award_id";
                    onSelectListener(inputId,rowData);
                    
                }
                调用一下方法,即可在<input id="award_id" name="award_id" type="hidden"></input>中获取到所有选择的ID值。
                
        传入参数:inputId 为存放ID值的 input。
               rowData    为 onSelect事件的 rowData
     */
    function onSelectListener(inputId,rowData){
        var oldId = $('#'+inputId).val();
        if(oldId != ""){
            var newId = oldId + "," + rowData.id;
            $('#'+inputId).val(newId);
        }else{
            $('#'+inputId).val(rowData.id);
        }
    }
    
    /**
     *         var oldId = $('#award_id').val();
            var ids = oldId.split(",");
            if(ids.length == 1 && ids[0] == ""+rowData.id){
                $('#award_id').val("");
            }else if(ids.length > 1){
                if(ids[0] == ""+rowData.id){
                    $('#award_id').val(oldId.replace(rowData.id+",",""));
                }else{
                    $('#award_id').val(oldId.replace(","+rowData.id,""));
                }
            }
            
            当在 datagrid  中 添加onUnselect事件后
            onUnselect:function(rowIndex,rowData){
                    
                    var inputId = "award_id";
                    onUnselectListener(inputId,rowData);
                    
                },
                调用一下方法,即可在<input id="award_id" name="award_id" type="hidden"></input>中获取到所有选择的ID值。
        传入参数:inputId 为存放ID值的 input。
               rowData    为 onUnselect事件的 rowData
     */
    function onUnselectListener(inputId,rowData){
        var oldId = $('#'+inputId).val();
        var ids = oldId.split(",");
        if(ids.length == 1 && ids[0] == ""+rowData.id){
            $('#'+inputId).val("");
        }else if(ids.length > 1){
            if(ids[0] == ""+rowData.id){
                $('#'+inputId).val(oldId.replace(rowData.id+",",""));
            }else{
                $('#'+inputId).val(oldId.replace(","+rowData.id,""));
            }
        }
    }
    
    /**
     *         var oldId = $('#award_id').val();
            if(oldId == ""){
                for(var i=0;i<rows.length;i++){
                    if(i == 0){
                        $('#award_id').val(rows[i].id);
                    }else{
                        $('#award_id').val($('#award_id').val()+","+rows[i].id);
                    }
                }
            }else{
                for(var i=0;i<rows.length;i++){
                    var Id = $('#award_id').val();
                    var ids = Id.split(",");
                    var isHave = true;
                    for(var j=0;j<ids.length;j++){
                        if(rows[i].id == ids[j]){
                            isHave =false;
                        }
                    }
                    if(isHave){
                        $('#award_id').val($('#award_id').val()+","+rows[i].id)
                    }
                }
            }
            
            当在 datagrid  中 添加onSelectAll事件后
                    onSelectAll:function(rows){
                    
                    var inputId = "award_id";
                    onSelectAllListener(inputId,rows);
                    
                }
                调用一下方法,即可在<input id="award_id" name="award_id" type="hidden"></input>中获取到所有选择的ID值。

        传入参数:inputId 为存放ID值的 input。
               rows    为 onSelectAll事件的 rows
     */
    function onSelectAllListener(inputId,rows){
        var oldId = $('#'+inputId).val();
        if(oldId == ""){
            for(var i=0;i<rows.length;i++){
                if(i == 0){
                    $('#'+inputId).val(rows[i].id);
                }else{
                    $('#'+inputId).val($('#'+inputId).val()+","+rows[i].id);
                }
            }
        }else{
            for(var i=0;i<rows.length;i++){
                var Id = $('#'+inputId).val();
                var ids = Id.split(",");
                var isHave = true;
                for(var j=0;j<ids.length;j++){
                    if(rows[i].id == ids[j]){
                        isHave =false;
                    }
                }
                if(isHave){
                    $('#'+inputId).val($('#'+inputId).val()+","+rows[i].id)
                }
            }
        }

    }

   

    window.onSelectAllListener = onSelectAllListener;
    window.onUnselectListener = onUnselectListener;
    window.onSelectListener = onSelectListener;


})(jQuery);
0 0
原创粉丝点击