js插件再次封装 demo
'use strict';
/**
* commerce grid框架
* 依赖jqgrid
*/
(function ($_self, jQuery) {
//jQuery.ajaxSetup({cache: false});
var _this = $_self;
/**
* 底层核心列表
* @param grid_selector gird选择器
* @param pager_selector 分页器选择器
* @param loadUrl 数据加载url
* @param editUrl 数据操作url
* @param colNames 列名数组
* @param colModel 列模型数组
* @param gridComplete 数据完成后函数
* @param subGrid 是否开启子grid
* @param subGridOptions 子grid配置
* @param subGridRowExpanded zigrid Row展开
* @param caption 标题
*
*
* var colModel = [{
* name: 'name',
* //是否可编辑
* editable: true,
* //编辑的一系列选项
* //edittype:'select', editoptions:{value:{1:'One',2:'Two'}}
* //editoptions: {multiple:true, size:3... }
* //editoptions: {size:10, maxlength: 8}
* //editoptions: { size: 10, readonly: 'readonly'},
* editoptions: {
* //readonly: 'readonly',
* disabled: true
* },
* //编辑规则
* // edithidden:true只在Form Editing模式下有效，设置为true，就可以让隐藏字段也可以修改
* // required:true,number:true,integer:true,minValue:10,maxValue:100,email:true,url:true,date:true,time:true,custom:true,custom_func:function(){}}
* editrules: {},
* //编辑类型 text, textarea, select, checkbox, password, button, image and file.
* edittype: 'text',
* //列宽度是否要固定不可变
* fixed: false,
* hidedlg: true,
* //在初始化表格时是否要隐藏此列
* hidden: false,
* //是否可以被resizable
* //resizable: true,
* //在搜索模式下，定义此列是否可以作为搜索列
* search: false,
* //是否可排序
* sortable: false,
* width: 150,
* datefmt: 'yyyy-MM-dd',
* //left,center,right
* align: 'left'
* }
* ];
*
*
*
*
*/
var _coreGrid = function (grid_selector, pager_selector, loadUrl, editUrl, colNames, colModel, gridComplete, subGrid, subGridOptions, subGridRowExpanded, caption, treeGrid, expandColumn, multiselect, onSelectRow) {
jQuery(grid_selector).jqGrid({
url: loadUrl,
//ajaxGridOptions: {contentType: 'application/x-www-form-urlencoded; charset=utf-8'},
//ajaxSelectOptions: {contentType: 'application/json; charset=utf-8'},
//editoptions: {contentType: 'application/json; charset=utf-8'},
datatype: "json",
height: '100%',
autowidth: true,
colNames: colNames,
colModel: colModel,
viewrecords: true,
rowNum: 10,
rowList: [10, 20, 30],
pager: pager_selector,
altRows: true,
//toppager: true,
multiselect: multiselect || false,
multiboxonly: multiselect || false,
beforeSelectRow: function (rowid, e) {
if (multiselect) {
var $myGrid = jQuery(this),
i = jQuery.jgrid.getCellIndex(jQuery(e.target).closest('td')[0]),
cm = $myGrid.jqGrid('getGridParam', 'colModel');
return (cm[i].name === 'cb');
}
return true;
},
jsonReader: {
root: "body.records",
page: "body.pageNo",
total: "body.pages",
records: "body.total",
repeatitems: false
},
emptyrecords: '没有记录显示',
loadComplete: function () {
var table = this;
setTimeout(function () {
styleCheckbox(table);
updateActionIcons(table);
updatePagerIcons(table);
enableTooltips(table);
}, 0);
},
gridComplete: gridComplete || function () {
},
editurl: editUrl,
onSelectRow: onSelectRow || function () {
},
//subGrid
subGrid: subGrid || false,
subGridOptions: subGridOptions || {},
subGridRowExpanded: subGridRowExpanded || function () {
},
caption: caption || '',
//treeGrid
treeGrid: treeGrid || false,
treeGridModel: 'adjacency',
ExpandColClick: true,
ExpandColumn: expandColumn || 'id',
treeIcons: {
plus: 'ace-icon fa fa-caret-right bigger-160 blue',
minus: 'ace-icon fa fa-caret-down bigger-160 blue',
leaf: 'ace-icon fa fa-tags orange'
}//树图标
});
//自适应
_this.resize(grid_selector);
//_this.addFun(grid_selector);
};
/**
* 选中数据
* @param grid
* @param id
*/
_this.setSelectData = function (grid_selector, ids) {
var _ids = ids || [];
var grid = jQuery(grid_selector);
for (var i = 0; i < _ids.length; i++) {
grid.jqGrid("setSelection", _ids[i]);
}
};
_this.reloadGrid = function (grid_selector) {
$(grid_selector).trigger('reloadGrid');
};
/**
* 简单crud列表
*/
_this.crudGrid = function (grid_selector, pager_selector, loadUrl, editUrl, colNames, colModel) {
_coreGrid(grid_selector, pager_selector, loadUrl, editUrl, colNames, colModel);
_this.navButtons(grid_selector, pager_selector, colModel);
};
/**
* 树列表
*/
_this.treeGrid = function (grid_selector, pager_selector, loadUrl, editUrl, colNames, colModel, expandColumn) {
_coreGrid(grid_selector, pager_selector, loadUrl, editUrl, colNames, colModel, '', false, '', '', '', true, expandColumn);
_this.navButtons(grid_selector, pager_selector, colModel);
};
/**
* 定制操作列表
* navButtons : {add: true, del: true, edit: true, view: true, search: true};
*/
_this.treeNavGrid = function (grid_selector, pager_selector, loadUrl, editUrl, colNames, colModel, navButtons, expandColumn) {
_coreGrid(grid_selector, pager_selector, loadUrl, editUrl, colNames, colModel, '', false, '', '', '', true, expandColumn);
_this.navButtons(grid_selector, pager_selector, colModel, navButtons);
};
/**
* 定制操作tree列表
* navButtons : {add: true, del: true, edit: true, view: true, search: true};
*/
_this.operTreeNavGrid = function (grid_selector, pager_selector, loadUrl, editUrl, colNames, colModel, navButtons, expandColumn, opers) {
var gridComplete = function () {
var grid = jQuery(grid_selector);
var ids = grid.jqGrid('getDataIDs');
for (var i = 0, j = ids.length; i < j; i++) {
var cl = ids[i];
var opers_button = '';
for (var m = 0, n = opers.length; m < n; m++) {
opers_button += "<input type='button' value='" + opers[m].oper + "' onclick=\"(" + opers[m].action + ")(" + cl + ")\">";
}
grid.jqGrid('setRowData', cl, {operation: opers_button});
}
};
_coreGrid(grid_selector, pager_selector, loadUrl, editUrl, colNames, colModel, gridComplete, false, '', '', '', true, expandColumn);
_this.navButtons(grid_selector, pager_selector, colModel, navButtons);
};
/**
* 数据行带操作按钮的列表
* {
name: 'operation',
width: 80,
fixed: true,
sortable: false,
resize: false
}
* opers : [{oper:'发布',action:function}]
*/
_this.operGrid = function (grid_selector, pager_selector, loadUrl, editUrl, colNames, colModel, opers) {
var gridComplete = function () {
var grid = jQuery(grid_selector);
var ids = grid.jqGrid('getDataIDs');
for (var i = 0, j = ids.length; i < j; i++) {
var cl = ids[i];
var opers_button = '';
for (var m = 0, n = opers.length; m < n; m++) {
opers_button += "<input type='button' value='" + opers[m].oper + "' onclick=\"(" + opers[m].action + ")(" + cl + ")\">";
}
grid.jqGrid('setRowData', cl, {operation: opers_button});
}
};
_coreGrid(grid_selector, pager_selector, loadUrl, editUrl, colNames, colModel, gridComplete);
_this.navButtons(grid_selector, pager_selector, colModel);
};
/**
* 数据行带操作按钮的列表并定制操作
*/
_this.operNavGrid = function (grid_selector, pager_selector, loadUrl, editUrl, colNames, colModel, opers, navButtons) {
var gridComplete = function () {
var grid = jQuery(grid_selector);
var ids = grid.jqGrid('getDataIDs');
for (var i = 0, j = ids.length; i < j; i++) {
var cl = ids[i];
var opers_button = '';
for (var m = 0, n = opers.length; m < n; m++) {
opers_button += "<input type='button' value='" + opers[m].oper + "' onclick=\"(" + opers[m].action + ")(" + cl + ")\">";
}
grid.jqGrid('setRowData', cl, {operation: opers_button});
}
};
_coreGrid(grid_selector, pager_selector, loadUrl, editUrl, colNames, colModel, gridComplete);
_this.navButtons(grid_selector, pager_selector, colModel, navButtons);
};
/**
* 定制操作列表
* navButtons : {add: true, del: true, edit: true, view: true, search: true};
*/
_this.navGrid = function (grid_selector, pager_selector, loadUrl, editUrl, colNames, colModel, navButtons, gridComplete) {
_coreGrid(grid_selector, pager_selector, loadUrl, editUrl, colNames, colModel, gridComplete);
_this.navButtons(grid_selector, pager_selector, colModel, navButtons);
};
/**
* 定制多选操作列表
* navButtons : {add: true, del: true, edit: true, view: true, search: true};
*/
_this.navSelectGrid = function (grid_selector, pager_selector, loadUrl, editUrl, colNames, colModel, navButtons, gridComplete, onSelectRow) {
_coreGrid(grid_selector, pager_selector, loadUrl, editUrl, colNames, colModel, gridComplete, '', '', '', '', '', '', true, onSelectRow);
_this.navButtons(grid_selector, pager_selector, colModel, navButtons);
};
/**
* 定制多选操作父子列表
* navButtons : {add: true, del: true, edit: true, view: true, search: true};
*/
_this.navSelectHasSubGrid = function (grid_selector, pager_selector, loadUrl, editUrl, colNames, colModel, navButtons, subLoadUrl, subEditUrl, subColNames, subColModel, subNavButtons, isShowSubHeader, gridComplete, onSelectRow) {
_this.hasNavSubGrid(grid_selector, pager_selector, loadUrl, editUrl, colNames, colModel, navButtons, subLoadUrl, subEditUrl, subColNames, subColModel, subNavButtons, gridComplete, isShowSubHeader, true, onSelectRow);
_this.navButtons(grid_selector, pager_selector, colModel, navButtons);
};
/**
* 父数据行带操作按钮的列表
* {
name: 'operation',
width: 80,
fixed: true,
sortable: false,
resize: false
}
* opers : [{oper:'发布',action:function}]
*/
_this.operHasSubGrid = function (grid_selector, pager_selector, loadUrl, editUrl, colNames, colModel, subLoadUrl, subEditUrl, subColNames, subColModel, opers, isShowSubHeader) {
_this.operHasNavSubGrid(grid_selector, pager_selector, loadUrl, editUrl, colNames, colModel, '', subLoadUrl, subEditUrl, subColNames, subColModel, '', opers, isShowSubHeader);
};
/**
* 定制操作列表[父数据行带操作按钮的列表]
* navButtons : {add: true, del: true, edit: true, view: true, search: true};
* subNavButtons : {add: true, del: true, edit: true, view: true, search: true};
*/
_this.operHasNavSubGrid = function (grid_selector, pager_selector, loadUrl, editUrl, colNames, colModel, navButtons, subLoadUrl, subEditUrl, subColNames, subColModel, subNavButtons, opers, isShowSubHeader) {
var gridComplete = function () {
var grid = jQuery(grid_selector);
var ids = grid.jqGrid('getDataIDs');
for (var i = 0, j = ids.length; i < j; i++) {
var cl = ids[i];
var opers_button = '';
for (var m = 0, n = opers.length; m < n; m++) {
opers_button += "<input type='button' value='" + opers[m].oper + "' onclick=\"(" + opers[m].action + ")(" + cl + ")\">";
}
grid.jqGrid('setRowData', cl, {operation: opers_button});
}
};
_this.hasNavSubGrid(grid_selector, pager_selector, loadUrl, editUrl, colNames, colModel, navButtons, subLoadUrl, subEditUrl, subColNames, subColModel, subNavButtons, gridComplete, isShowSubHeader);
};
/**
* 含有子列表的列表
*/
_this.hasSubGrid = function (grid_selector, pager_selector, loadUrl, editUrl, colNames, colModel, subLoadUrl, subEditUrl, subColNames, subColModel) {
_this.hasNavSubGrid(grid_selector, pager_selector, loadUrl, editUrl, colNames, colModel, '', subLoadUrl, subEditUrl, subColNames, subColModel);
};
/**
* 定制操作列表
* navButtons : {add: true, del: true, edit: true, view: true, search: true};
* subNavButtons : {add: true, del: true, edit: true, view: true, search: true};
*/
_this.hasNavSubGrid = function (grid_selector, pager_selector, loadUrl, editUrl, colNames, colModel, navButtons, subLoadUrl, subEditUrl, subColNames, subColModel, subNavButtons, gridComplete, isShowSubHeader, multiselect, onSelectRow) {
var subGridOptions = {
plusicon: "ace-icon fa fa-plus center bigger-110 blue",
minusicon: "ace-icon fa fa-minus center bigger-110 blue",
openicon: "ace-icon fa fa-chevron-right center orange"
};
var subGridRowExpanded = function (subgrid_id, row_id) {
var subgrid_table_id = subgrid_id + "_t";
var subgrid_pager_id = subgrid_id + '_pgr';
jQuery("#" + subgrid_id).html("<table + subgrid_table_id + "' class='scroll'></table><div + subgrid_pager_id + "' class='scroll'></div>");
var _subLoadUrl = subLoadUrl.indexOf('?') == -1 ? (subLoadUrl + '?r&rid=' + row_id);
var _subEditUrl = subEditUrl.indexOf('?') == -1 ? (subEditUrl + '?r&rid=' + row_id);
_coreGrid('#' + subgrid_table_id, '#' + subgrid_pager_id, _subLoadUrl, _subEditUrl, subColNames, subColModel);
if (!isShowSubHeader) {
jQuery(".ui-subgrid").find(".ui-jqgrid-htable").hide();
}
_this.navButtons('#' + subgrid_table_id, '#' + subgrid_pager_id, subColModel, subNavButtons);
};
_coreGrid(grid_selector, pager_selector, loadUrl, editUrl, colNames, colModel, gridComplete, true, subGridOptions, subGridRowExpanded, '', '', '', multiselect, onSelectRow);
_this.navButtons(grid_selector, pager_selector, colModel, navButtons);
};
/**
* 含有子列表
*/
_this.hasSubList = function (grid_selector, pager_selector, loadUrl, editUrl, colNames, colModel, subLoadUrl, subColModel, subColNames, isShowSubHeader) {
_this.hasNavSubList(grid_selector, pager_selector, loadUrl, editUrl, colNames, colModel, '', subLoadUrl, subColModel, subColNames, isShowSubHeader);
};
/**
* 父数据行带操作按钮的列表
* {
name: 'operation',
width: 80,
fixed: true,
sortable: false,
resize: false
}
* opers : [{oper:'发布',action:function}]
*/
_this.operHasNavSubList = function (grid_selector, pager_selector, loadUrl, editUrl, colNames, colModel, navButtons, subLoadUrl, subColModel, subColNames, opers, isShowSubHeader) {
var gridComplete = function () {
var grid = jQuery(grid_selector);
var ids = grid.jqGrid('getDataIDs');
for (var i = 0, j = ids.length; i < j; i++) {
var cl = ids[i];
var opers_button = '';
for (var m = 0, n = opers.length; m < n; m++) {
opers_button += "<input type='button' value='" + opers[m].oper + "' onclick=\"(" + opers[m].action + ")(" + cl + ")\">";
}
grid.jqGrid('setRowData', cl, {operation: opers_button});
}
};
_this.hasNavSubList(grid_selector, pager_selector, loadUrl, editUrl, colNames, colModel, navButtons, subLoadUrl, subColModel, subColNames, gridComplete, isShowSubHeader);
};
/**
* 定制操作列表
* navButtons : {add: true, del: true, edit: true, view: true, search: true};
*/
_this.hasNavSubList = function (grid_selector, pager_selector, loadUrl, editUrl, colNames, colModel, navButtons, subLoadUrl, subColModel, subColNames, gridComplete, isShowSubHeader,multiselect,onSelectRow) {
var subGridOptions = {
plusicon: "ace-icon fa fa-plus center bigger-110 blue",
minusicon: "ace-icon fa fa-minus center bigger-110 blue",
openicon: "ace-icon fa fa-chevron-right center orange"
};
var subGridRowExpanded = function (subgrid_id, row_id) {
var subgrid_table_id = subgrid_id + "_t";
jQuery("#" + subgrid_id).html("<table + subgrid_table_id + "' class='scroll'></table>");
var _subLoadUrl = subLoadUrl.indexOf('?') == -1 ? (subLoadUrl + '?r&rid=' + row_id);
_coreGrid('#' + subgrid_table_id, '', _subLoadUrl, '', subColNames, subColModel);
if (!isShowSubHeader) {
jQuery(".ui-subgrid").find(".ui-jqgrid-htable").hide();
}
};
_coreGrid(grid_selector, pager_selector, loadUrl, editUrl, colNames, colModel, gridComplete, true, subGridOptions, subGridRowExpanded,'','','',multiselect,onSelectRow);
_this.navButtons(grid_selector, pager_selector, colModel, navButtons);
};
//操作按钮组函数
_this.navButtons = function (grid_selector, pager_selector, colModel, navButtons) {
//navButtons
var _navButtons = navButtons || {add: true, del: true, edit: true, view: true, search: false};
jQuery(grid_selector).jqGrid('navGrid', pager_selector,
{ //navbar options
edit: _navButtons.edit,
editicon: 'ace-icon fa fa-pencil blue',
add: _navButtons.add,
addicon: 'ace-icon fa fa-plus-circle purple',
del: _navButtons.del,
delicon: 'ace-icon fa fa-trash-o red',
search: _navButtons.search,
searchicon: 'ace-icon fa fa-search orange',
refresh: true,
refreshicon: 'ace-icon fa fa-refresh green',
view: _navButtons.view,
viewicon: 'ace-icon fa fa-search-plus grey'
},
{
//编辑记录 表单
//closeAfterEdit: true,
//width: 700,
recreateForm: true,
beforeShowForm: function (e) {
var form = $(e[0]);
form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
style_edit_form(form);
},
afterSubmit: function (data, postdata, oper) {
var response = data.responseJSON;
if (response.hasOwnProperty("error")) {
if (response.error.length) {
return [false, response.error];
}
}
return [true, "", ""];
},
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
}
},
{
//新建记录 表单
//width: 700,
closeAfterAdd: true,
recreateForm: true,
viewPagerButtons: false,
beforeShowForm: function (e) {
//设置tree parent
//var parent = jQuery('#parent');
//if (parent && parent.length) {
// var id = jQuery(grid_selector).jqGrid('getGridParam', 'selrow');
// if (id) {
// jQuery('#parent').val(id);
// }
//}
for (var i = 0, j = colModel.length; i < j; i++) {
e.find('#' + colModel[i].name).attr('disabled', false);
}
var form = $(e[0]);
form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar')
.wrapInner('<div class="widget-header" />');
style_edit_form(form);
},
afterSubmit: function (data, postdata, oper) {
var response = data.responseJSON;
if (response.hasOwnProperty("error")) {
if (response.error.length) {
return [false, response.error];
}
}
return [true, "", ""];
},
errorTextFormat: function (data) {
var response = jQuery.parseJSON(data.responseText);
return '错误: ' + response.body;
}
},
{
//删除记录 表单
recreateForm: true,
beforeShowForm: function (e) {
var form = $(e[0]);
if (form.data('styled')) return false;
form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
style_delete_form(form);
form.data('styled', true);
},
afterSubmit: function (data, postdata, oper) {
var response = data.responseJSON;
if (response.hasOwnProperty("error")) {
if (response.error.length) {
return [false, response.error];
}
}
return [true, "", ""];
},
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
}
},
{
//搜索 表单
recreateForm: true,
afterShowSearch: function (e) {
var form = $(e[0]);
form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
style_search_form(form);
},
afterRedraw: function () {
style_search_filters($(this));
}
,
multipleSearch: true
/**
multipleGroup:true,
showQuery: true
*/
},
{
//查看记录 表单
recreateForm: true,
beforeShowForm: function (e) {
var form = $(e[0]);
form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
},
afterSubmit: function (data, postdata, oper) {
var response = data.responseJSON;
if (response.hasOwnProperty("error")) {
if (response.error.length) {
return [false, response.error];
}
}
return [true, "", ""];
},
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
}
}
);
};
//自适应
_this.resize = function (grid_selector) {
//拉伸缩小时适应当前页面
$(window).on('resize.jqGrid', function () {
$(grid_selector).jqGrid('setGridWidth', $(".page-content").width());
})
//当前侧边栏隐藏显示/缩小时拉伸/缩小jqgrid
var parent_column = $(grid_selector).closest('[class*="col-"]');
$(document).on('settings.ace.jqGrid', function (ev, event_name, collapsed) {
if (event_name === 'sidebar_collapsed' || event_name === 'main_container_fixed') {
//setTimeout is for webkit only to give time for DOM changes and then redraw!!!
setTimeout(function () {
$(grid_selector).jqGrid('setGridWidth', parent_column.width());
}, 0);
}
})
//if your grid is inside another element, for example a tab pane, you should use its parent's width:
/**
$(window).on('resize.jqGrid', function () {
var parent_width = $(grid_selector).closest('.tab-pane').width();
$(grid_selector).jqGrid( 'setGridWidth', parent_width );
})
//and also set width when tab pane becomes visible
$('#myTab a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
if($(e.target).attr('href') == '#mygrid') {
var parent_width = $(grid_selector).closest('.tab-pane').width();
$(grid_selector).jqGrid( 'setGridWidth', parent_width );
}
})
*/
$(window).triggerHandler('resize.jqGrid');//trigger window resize to make the grid get the correct size
};
//添加辅助函数
_this.addFun = function (grid_selector) {
//enable search/filter toolbar
//jQuery(grid_selector).jqGrid('filterToolbar',{defaultSearch:true,stringResult:true})
//jQuery(grid_selector).filterToolbar({});
//var selr = jQuery(grid_selector).jqGrid('getGridParam','selrow');
$(document).one('ajaxloadstart.page', function (e) {
$(grid_selector).jqGrid('GridUnload');
$('.ui-jqdialog').remove();
});
};
//datepicker 时间控件
_this.datepicker = function (cellvalue, options, cell) {
setTimeout(function () {
$.fn.datepicker.dates['zh'] = {
days: ["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
daysShort: ["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
daysMin: ["天", "一", "二", "三", "四", "五", "六"],
months: ["一月", "二月", "三月", "四月", "五岳", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
monthsShort: ["一月", "二月", "三月", "四月", "五岳", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
today: "今天",
clear: "Clear",
format: "yyyy年mm月dd日",
titleFormat: "yyyy MM",
weekStart: 0
};
$(cell).find('input[type=text]')
.datepicker({
format: 'yyyy-mm-dd',
autoclose: 'true',
startDate: '0d',
disableTouchKeyboard: 'true',
language: 'zh'
});
}, 0);
};
//样式定制函数开始
//switch element when editing inline
function aceSwitch(cellvalue, options, cell) {
setTimeout(function () {
$(cell).find('input[type=checkbox]')
.addClass('ace ace-switch ace-switch-5')
.after('<span class="lbl"></span>');
}, 0);
}
function style_edit_form(form) {
//enable datepicker on "sdate" field and switches for "stock" field
form.find('input[name=sdate]').datepicker({format: 'yyyy-mm-dd', autoclose: true})
form.find('input[name=stock]').addClass('ace ace-switch ace-switch-5').after('<span class="lbl"></span>');
//don't wrap inside a label element, the checkbox value won't be submitted (POST'ed)
//.addClass('ace ace-switch ace-switch-5').wrap('<label class="inline" />').after('<span class="lbl"></span>');
//update buttons classes
var buttons = form.next().find('.EditButton .fm-button');
buttons.addClass('btn btn-sm').find('[class*="-icon"]').hide();//ui-icon, s-icon
buttons.eq(0).addClass('btn-primary').prepend('<i class="ace-icon fa fa-check"></i>');
buttons.eq(1).prepend('<i class="ace-icon fa fa-times"></i>')
buttons = form.next().find('.navButton a');
buttons.find('.ui-icon').hide();
buttons.eq(0).append('<i class="ace-icon fa fa-chevron-left"></i>');
buttons.eq(1).append('<i class="ace-icon fa fa-chevron-right"></i>');
}
function style_delete_form(form) {
var buttons = form.next().find('.EditButton .fm-button');
buttons.addClass('btn btn-sm btn-white btn-round').find('[class*="-icon"]').hide();//ui-icon, s-icon
buttons.eq(0).addClass('btn-danger').prepend('<i class="ace-icon fa fa-trash-o"></i>');
buttons.eq(1).addClass('btn-default').prepend('<i class="ace-icon fa fa-times"></i>')
}
function style_search_filters(form) {
form.find('.delete-rule').val('X');
form.find('.add-rule').addClass('btn btn-xs btn-primary');
form.find('.add-group').addClass('btn btn-xs btn-success');
form.find('.delete-group').addClass('btn btn-xs btn-danger');
}
function style_search_form(form) {
var dialog = form.closest('.ui-jqdialog');
var buttons = dialog.find('.EditTable')
buttons.find('.EditButton a[id*="_reset"]').addClass('btn btn-sm btn-info').find('.ui-icon').attr('class', 'ace-icon fa fa-retweet');
buttons.find('.EditButton a[id*="_query"]').addClass('btn btn-sm btn-inverse').find('.ui-icon').attr('class', 'ace-icon fa fa-comment-o');
buttons.find('.EditButton a[id*="_search"]').addClass('btn btn-sm btn-purple').find('.ui-icon').attr('class', 'ace-icon fa fa-search');
}
function beforeDeleteCallback(e) {
var form = $(e[0]);
if (form.data('styled')) return false;
form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
style_delete_form(form);
form.data('styled', true);
}
function beforeEditCallback(e) {
var form = $(e[0]);
form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
style_edit_form(form);
}
//it causes some flicker when reloading or navigating grid
//it may be possible to have some custom formatter to do this as the grid is being created to prevent this
//or go back to default browser checkbox styles for the grid
function styleCheckbox(table) {
/**
$(table).find('input:checkbox').addClass('ace')
.wrap('<label />')
.after('<span class="lbl align-top" />')
$('.ui-jqgrid-labels th[id*="_cb"]:first-child')
.find('input.cbox[type=checkbox]').addClass('ace')
.wrap('<label />').after('<span class="lbl align-top" />');
*/
}
//unlike navButtons icons, action icons in rows seem to be hard-coded
//you can change them like this in here if you want
function updateActionIcons(table) {
/**
var replacement =
{
'ui-ace-icon fa fa-pencil' : 'ace-icon fa fa-pencil blue',
'ui-ace-icon fa fa-trash-o' : 'ace-icon fa fa-trash-o red',
'ui-icon-disk' : 'ace-icon fa fa-check green',
'ui-icon-cancel' : 'ace-icon fa fa-times red'
};
$(table).find('.ui-pg-div span.ui-icon').each(function(){
var icon = $(this);
var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
})
*/
}
//replace icons with FontAwesome icons like above
function updatePagerIcons(table) {
var replacement =
{
'ui-icon-seek-first': 'ace-icon fa fa-angle-double-left bigger-140',
'ui-icon-seek-prev': 'ace-icon fa fa-angle-left bigger-140',
'ui-icon-seek-next': 'ace-icon fa fa-angle-right bigger-140',
'ui-icon-seek-end': 'ace-icon fa fa-angle-double-right bigger-140'
};
$('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function () {
var icon = $(this);
var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
if ($class in replacement) icon.attr('class', 'ui-icon ' + replacement[$class]);
})
}
function enableTooltips(table) {
$('.navtable .ui-pg-button').tooltip({container: 'body'});
$(table).find('.ui-pg-div').tooltip({container: 'body'});
}
//样式定制函数结束
})(window.cgrid = {}, jQuery);