<script type="text/javascript">
jQuery(function($) {
var grid_selector = "#grid-table";
var pager_selector = "#grid-pager";

jQuery(grid_selector).jqGrid({
url:"${base}/system/test/getJsonSection",
datatype: "json",
height: 390,
colNames:['编号','标题','子标题', '作者','关键字','添加人','添加时间','新闻类型','新闻来源','操作'],
colModel:[
{name:'id',index:'id', width:60, sorttype:"int", editable: true},
{name:'title',index:'title',width:90,editable: true},
{name:'subtitle',index:'subtitle', width:80,editable: true},
{name:'author',index:'author', width:70, editable: true},
/*{name:'summary',index:'summary', width:90,editable: true},
{name:'article_content',index:'article_content', width:120,editable: true},*/
{name:'keyword',index:'keyword',width:70,editable:true},
{name:'adduser',index:'adduser',editable:true, sorttype:"int"},
{name:'adddate',index:'adddate', sorttype:"date"},
{name:'typeflag',index:'typeflag',width:90, editable: true},
{name:'provenance',index:'provenance',width:70,editable:true},
{name:'myac',index:'', width:70, fixed:true, sortable:false, resize:false,
formatter:'actions', 
formatoptions:{ 
keys:true,
delOptions:{recreateForm: true, beforeShowForm:beforeDeleteCallback},
}
}
], 

viewrecords : true,
rowNum:10,
rowList:[10,20,30],
pager : pager_selector,
altRows: true,

multiselect: true,
//multikey: "ctrlKey",
        multiboxonly: true,

//上一页下一页
loadComplete : function() {
var table = this;
console.log(table);
setTimeout(function(){
styleCheckbox(table);
updateActionIcons(table);
updatePagerIcons(table);
enableTooltips(table);
}, 0);
},

editurl: "${base}/system/test/edit",//增改删方法
caption: "新闻列表",

///////////////////////////////////////////
autowidth: true
/*
gridComplete: function(){
var ids = jQuery(grid_selector).jqGrid('getDataIDs');
for(var i = 0;i < ids.length;++i){
var s = '<button class="btn btn-minier btn-blue" title="科室管理" onclick="window.location.href=\'${base}/fz/hospital/section/manage?id=' + ids[i] + '\'">管理</button>'
//var s = '<a class="blue" id="hide-option" href="${base}/fz/hospital/section/manage?id=' + ids[i] + '" title="科室管理"><i class="icon-hand-right"></i></a>';
jQuery(grid_selector).jqGrid('setRowData', ids[i], {myac: s});
}
}*/
});

//enable search/filter toolbar
//jQuery(grid_selector).jqGrid('filterToolbar',{defaultSearch:true,stringResult:true})


function aceSwitch( cellvalue, options, cell ) {
setTimeout(function(){
$(cell) .find('input[type=checkbox]')
.wrap('<label class="inline" />')
.addClass('ace ace-switch ace-switch-5')
.after('<span class="lbl"></span>');
}, 0);
}
//enable datepicker
function pickDate( cellvalue, options, cell ) {
setTimeout(function(){
$(cell) .find('input[type=text]')
.datepicker({format:'yyyy-mm-dd' , autoclose:true}); 
}, 0);
} //navButtons
jQuery(grid_selector).jqGrid('navGrid',pager_selector,
{  //增删改的控件
edit: true,
editicon : 'icon-pencil blue',
add: true,
addicon : 'icon-plus-sign purple',

del: true,
delicon : 'icon-trash red',
refresh: true,
refreshicon : 'icon-refresh green',
},
{
//edit record form
//closeAfterEdit: true,
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);
}
},
{
//new record form
closeAfterAdd: true,
viewPagerButtons: false,
beforeShowForm : function(e) {
var form = $(e[0]);
form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
style_edit_form(form);
add();
}
},
{
//delete record form
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);
},
onClick : function(e) {
alert(1);
}
},
{
//search form
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
*/
},
{
//view record form
recreateForm: true,
beforeShowForm: function(e){
var form = $(e[0]);
form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
}
}
)



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})
.end().find('input[name=stock]')
  .addClass('ace ace-switch ace-switch-5').wrap('<label class="inline" />').after('<span class="lbl "></span>').parent().parent().parent().parent().parent().parent().parent().parent().addClass('verybig');

//update buttons classes
var buttons = form.next().find('.EditButton .fm-button');
buttons.addClass('btn btn-sm').find('[class*="-icon"]').remove();//ui-icon, s-icon
buttons.eq(0).addClass('btn-primary').prepend('<i class="icon-ok"></i>');
buttons.eq(1).prepend('<i class="icon-remove"></i>')

buttons = form.next().find('.navButton a');
buttons.find('.ui-icon').remove();
buttons.eq(0).append('<i class="icon-chevron-left"></i>');
buttons.eq(1).append('<i class="icon-chevron-right"></i>');
}

function style_delete_form(form) {
var buttons = form.next().find('.EditButton .fm-button');
buttons.addClass('btn btn-sm').find('[class*="-icon"]').remove();//ui-icon, s-icon
buttons.eq(0).addClass('btn-danger').prepend('<i class="icon-trash"></i>');
buttons.eq(1).prepend('<i class="icon-remove"></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', 'icon-retweet');
buttons.find('.EditButton a[id*="_query"]').addClass('btn btn-sm btn-inverse').find('.ui-icon').attr('class', 'icon-comment-alt');
buttons.find('.EditButton a[id*="_search"]').addClass('btn btn-sm btn-purple').find('.ui-icon').attr('class', 'icon-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);
} 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-icon-pencil' : 'icon-pencil blue',
'ui-icon-trash' : 'icon-trash red',
'ui-icon-disk' : 'icon-ok green',
'ui-icon-cancel' : 'icon-remove 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' : 'icon-double-angle-left bigger-140',
'ui-icon-seek-prev' : 'icon-angle-left bigger-140',
'ui-icon-seek-next' : 'icon-angle-right bigger-140',
'ui-icon-seek-end' : 'icon-double-angle-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'});
}

});
 function add(){
alert(111);

}
</script>