jQuery-EasyUI 开发笔记

Question

EasyUI 分页

点击查询按钮 查询数据 分页

// C# Code

略

// javascript

//用户车辆管理
function DataManage() {
        var _this = this;// _this 为 DataManage 对象
        //初始页面分页数
        _this.initPageSize = 20;
        _this.initpageIndex = 1;
        _this.Init = function () {
                $('#vehicle_pp').pagination({
                      total: 0,
                      pageSize: _this.initPageSize,
                      onSelectPage: function (pageNumber, pageSize) {
                        _this.initpageIndex = pageNumber;
                        _this.initPageSize = pageSize;
                        _this.getVehicleInfo_PageChnage(pageNumber, pageSize);
                      }
                });
        }

        //第一次查询（传入条件即可）
        _this.getVehicleInfo_First = function () {
               var companyId = $('#company_code').combobox("getValue");
               var onlineState = $('#online_state').combobox("getValue");
               var forwardingFlag = $('#forwarding_flag').combobox("getValue");
               var licensePlate = $('#license_plate').val();
               var simcardNo = $('#simcard_no').val();
               var deviceId = $('#device_id').val();
               var ownerName = $('#owner_name').val();
               //注意：div #user_vehicle_data 之间有个空格
               $.getJSON("/Data/GetUserVehicleData", { pageIndex: _this.initpageIndex, pageSize: _this.initPageSize, companyId: companyId, onlineState: onlineState, forwardingFlag: forwardingFlag, licensePlate: licensePlate, simcardNo: simcardNo, deviceId: deviceId, ownerName: ownerName }, function (data) {
               $('div #user_vehicle_data').datagrid({
                 collapsible: true,
                 data: data.uservehiclelist,
               });
               $('#vehicle_pp').pagination({
                 total: data.count,
                 pageSize: 20,
                 onSelectPage: function (pageNumber, pageSize) {
                 _this.getVehicleInfo_PageChnage(pageNumber, pageSize);
               }
            });
         });
     }

     //页面 page 改变时查询
     _this.getVehicleInfo_PageChnage = function (pageNumber, pageSize) {
        var companyId = $('#company_code').combobox("getValue");
        var onlineState = $('#online_state').combobox("getValue");
        var forwardingFlag = $('#forwarding_flag').combobox("getValue");
        var licensePlate = $('#license_plate').val();
        var simcardNo = $('#simcard_no').val();
        var deviceId = $('#device_id').val();
        var ownerName = $('#owner_name').val();
        $.getJSON("/Data/GetUserVehicleData", { pageIndex: pageNumber, pageSize: pageSize, companyId: companyId, onlineState: onlineState, forwardingFlag: forwardingFlag, licensePlate: licensePlate, simcardNo: simcardNo, deviceId: deviceId, ownerName: ownerName }, function (data) {
                $('div #user_vehicle_data').datagrid({
                        collapsible: true,
                        total: data.count,
                        data: data.uservehiclelist,
                });
        });
     }
}

// 调用

$(function () {
        p_dataManage=new DataManage();
        p_dataManage.Init(); //初始化加载
});
<td><a href="#" class="easyui-linkbutton" style="border:1px #95B8E7 solid" iconcls="icon-search" plain="true" onclick="p_dataManage.getVehicleInfo_First()">查询</a></td>

DataGrid

DataGrid 实现行编辑功能

// 效果图：

// html code：

<table id="SearchDrawRect" class="easyui-datagrid"
data-options="rownumbers:false,singleSelect:true,method:'get',fit:true">
<thead>
        <tr>
                <th data-options="field:'vehicle_id',width:40,checkbox:true">轨迹</th>
                <th data-options="field:'company_name',width:150">公司</th>
                <th data-options="field:'license_plate',width:80">车牌</th>
                <th data-options="field:'owner_name',width:100">联系人</th>
                <th data-options="field:'owner_telephone',width:120">联系电话</th>
                <th data-options="field:'load_seat',width:80,editor:{type:'numberbox',options:{precision:2}}">载重（吨)</th>
                <th data-options="field:'second_contact_phone',width:80,editor:{type:'textbox',options:{validType:'length[1,10]'}}">车长（米)</th>
                <th data-options="field:'traction',width:80,editor:{type:'numberbox',options:{precision:2}}">运价</th>
                <th data-options="field:'location_time',width:125">定位时间</th>
        </tr>
</thead>
</table>

// JavaScript code：

<script type="text/javascript">
        $('#SearchDrawRect').datagrid({
                data: data,
                rowStyler: function (index, row) {
                        if (row.is_online == "0") {
                                return 'color:gray;';
                        }
                        if (row.is_online == "1") {
                                var a = 'color:purple';
                                if (row.speed > 0) {
                                        a = 'color:green;';
                                }
                                if (row.alarm_desc != '' && row.alarm_desc != null) {
                                        a = 'color:red;';
                                }
                                                            return a;
                        }
                },
                onCheck: function (rowIndex, rowData) {
                        var x = rowData.real_x;
                        var y = rowData.real_y;
                        _this.Map.SetCenterRect(x + "|" + y, rowData.vehicle_id);
                },
                onDblClickCell: function (index, field, value) {
                        if (editIndex != index) {
                                if (_this.endEditing()) {
                                        $("#SearchDrawRect").datagrid('selectRow', index).datagrid('beginEdit', index);
                                        var ed = $('#SearchDrawRect').datagrid('getEditor', { index: index, field: "load_seat" });
                    ($(ed.target).data('textbox') ? $(ed.target).textbox('textbox') : $(ed.target)).focus();//获取焦点
                    editIndex = index;
                } else {
                        $("#SearchDrawRect").datagrid('endEdit', editRow);
                }
            }
        },
        toolbar: [{
                text: '保存',
                iconCls: 'icon-save',
                handler: function () {
                        var row = $('#SearchDrawRect').datagrid('getSelected');
                        if (row != null) {
                    var rowIndex = $('#SearchDrawRect').datagrid('getRowIndex', row);//行 Index
                    //获取当前编辑行对象
                    var loadSeatEditor = $('#SearchDrawRect').datagrid('getEditor', { index: rowIndex, field: "load_seat" });
                    var secondContactPhoneEditor = $('#SearchDrawRect').datagrid('getEditor', { index: rowIndex, field: "second_contact_phone" });
                    var tractionEditor = $('#SearchDrawRect').datagrid('getEditor', { index: rowIndex, field: "traction" });
                    if (loadSeatEditor == null || secondContactPhoneEditor == null || tractionEditor==null) {
                        AlertInfo("请选中当前编辑的行！");
                        return;
                    }
                    var updateData = {
                        vehicleId: row.vehicle_id,
                        loadSeat: $(loadSeatEditor.target).textbox('getValue'),
                        secondContactPhone: $(secondContactPhoneEditor.target).textbox('getValue'),
                        traction: $(tractionEditor.target).textbox('getValue')
                    };
                    $.post("/Data/UpdateVehicle", { vehicleId: updateData.vehicleId, loadSeat: updateData.loadSeat, secondContactPhone: updateData.secondContactPhone, traction: updateData.traction }, function (data) {
                        if (data == "1") {
                                AlertInfo("登录已失效，请重新登录系统！");
                        } else if (data == "2") {
                                AlertInfo("没有保存成功，请重新保存！");
                        }
                        else {
                                if (data != "") {
                                        AlertInfo(data);
                                } else {
                                        AlertInfo("修改成功");
                                $("#SearchDrawRect").datagrid('selectRow', rowIndex).datagrid('endEdit', rowIndex);//结束编辑行
                            }
                        }
                    });
                } else {
                        AlertInfo("请选中需要保存的数据！");
                }
            }
        }]
});
</script>

DataGrid 点击表头进行排序

// JavaScript code：

///排序
//obj 排序对象
//sortName 排序列名
//sortOrder 排序 acs，desc
_this.sort = function (obj, sortName, sortOrder) {
        var queryParams = $('#' + obj).datagrid('options').queryParams;
        queryParams.sortName = sortName;
        queryParams.sortOrder = sortOrder;
        $('#' + obj).datagrid('reload');
}

$('div #user_vehicle_data').datagrid({
      collapsible: true,
      queryParams: { "sortName": "", "sortOrder": "" },
      remoteSort: false,
      onSortColumn: function (sort, order) {
            _this.sort('user_vehicle_data', sort, order);//调用排序方法。
      },
      sortable: true,
      total: data.count,
      data: data.uservehiclelist,
});

DataGrid Filter

效果图

实现关键代码

//引入 filter 文件
//datagrid-filter-zh_CN.js 内容是自定义的，本小节结尾
<script src="~/Content/EasyUI1.4.5/datagrid-filter/datagrid-filter.js"></script>
<script src="~/Content/EasyUI1.4.5/datagrid-filter/datagrid-filter-zh_CN.js"></script>

//开启过滤，实现过滤方法
$('#SearchDrawRect').datagrid('enableFilter');
$('#SearchDrawRect').datagrid('enableFilter', [{
    field: 'vehicle_type_name',
    type: 'combobox',
    options: {
        url: '/Monitor/GetVehicleType',
        valueField: 'vehicle_type_name',//原 vehicle_type_code
        textField: 'vehicle_type_name',
        multiple: false,
        panelHeight: '200px',
        editable: false,
        onChange: function (value) {
             var vehicleTypeName="";
             if (value == '') {
                 $('#SearchDrawRect').datagrid('removeFilterRule', 'vehicle_type_name');
             } else {
                 $('#SearchDrawRect').datagrid('addFilterRule', {
                    field: 'vehicle_type_name',
                    op: 'equal',
                    value: value
                 });
             }
             $('#SearchDrawRect').datagrid('doFilter');
        }
    }
}, {
    field: 'load_seat',//车长
    type: 'numberbox',
    options: {
        precision: 2,
        onChange: function (value) {
            if (value == '') {
                dg.datagrid('removeFilterRule', 'load_seat');
            } else {
                $('#SearchDrawRect').datagrid('addFilterRule', {
                    field: 'load_seat',
                    op: 'greaterorequal',
                    value: value
                });
            }                    
            $('#SearchDrawRect').datagrid('doFilter');
       }
   }
}

datagrid-filter-zh_CN.js

//Add by 20170510,zrg
if ($.fn.datagrid) {
    $.fn.datagrid.defaults.operators.nofilter.text = '不过滤';
    $.fn.datagrid.defaults.operators.contains.text = '包含';
    $.fn.datagrid.defaults.operators.equal.text = '等于';
    $.fn.datagrid.defaults.operators.notequal.text = '不等于';
    $.fn.datagrid.defaults.operators.beginwith='开头';
    $.fn.datagrid.defaults.operators.endwith.text = '结尾';
    $.fn.datagrid.defaults.operators.less.text = '小于';
    $.fn.datagrid.defaults.operators.lessorequal.text = '小于或等于';
    $.fn.datagrid.defaults.operators.greater.text = '大于';
    $.fn.datagrid.defaults.operators.greaterorequal.text = '大于或等于';
}

参考资料

http://www.jeasyui.com/documentation/index.php  
http://46aae4d1e2371e4aa769798941cef698.devproxy.yunshipei.com/frightingforambition/article/details/50457407  
http://blog.csdn.net/hanchangning19890201/article/details/40786587  
http://www.cnblogs.com/sword-successful/p/3386861.html  

http://www.jeasyui.com/extension/datagrid_filter.php  
http://www.cnblogs.com/ckaifeng/p/5006569.html  
http://blog.csdn.net/hongping626/article/details/16856191  

Window 居中

var easyuiPanelOnOpen = function (left, top) {
        var iframeWidth = $(this).parent().parent().width();
        var iframeHeight = $(this).parent().parent().height();
        var windowWidth = $(this).parent().width();
        var windowHeight = $(this).parent().height();
        var setWidth = (iframeWidth - windowWidth) / 2;
        var setHeight = (iframeHeight - windowHeight) / 2;
        $(this).parent().css({/* 修正面板位置 */
                left: setWidth,
                top: setHeight
        });
        if (iframeHeight < windowHeight)
        {
                $(this).parent().css({/* 修正面板位置 */
                        left: setWidth,
                        top: 0
                });
        }
        $(".window-shadow").hide();
};
$.fn.window.defaults.onOpen = easyuiPanelOnOpen;

EasyUI-textbox 点击回车键 执行某个方法

html code:

<input id="tb" type="text" style="width:300px">

方法一：

//这种方法范围太广，如果页面有多个文本框就不好用了
$(window).keydown(function(event) {
     if(event.keyCode == 13) {
          alert('111');
     }
});

方法二：

//按照 id 监听某个文本框的回车事件
$('#clientID').textbox({
    inputEvents: $.extend({},$.fn.textbox.defaults.inputEvents,{
        keyup: function(event){ 
            if(event.keyCode == 13) {
                alert('OK');
            }
        }
    });
}); 

方法三：

$('#clientID').textbox('textbox').keydown(function (e) {
    if (e.keyCode == 13) {
        alert('000');
    }
});