jQuery在web项目中增删改查的应用

 <div id="gps_trackObject_container" class="ui-widget">
<div class="jQGrid_table_wrapper" style="width:97.5%;" >
    <table id="eventBase_table">
    </table>
    <div id="gps_trackObject_pager" class="nowrap"></div>


</div>
</div>








<script type="text/javascript">
tzsfbp.ready(function(){
// 当页面及所需的JS库加载完毕后，调用该函数体

$("#eventBase_table").jqGrid({
url:'../eventPerson/eventPerson_list.json', 
datatype: "json", 
colModel:[{name:'id', width:50,label:'id编号',sortable:false,hidden : true},
{name:'SFZMMC', width:10,label:'证件名称',sortable:true},
{name:'ZJHM', width:10,label:'证件号码',sortable:true},
{name:'DABH', width:10,label:'档案编号',sortable:true},
{name:'XM', width:30,label:'姓名',sortable:true},
{name:'XB', width:30,label:'性别',sortable:true},
{name:'CSRQString', width:30,label:'出生日期',sortable:true,formatter:'date',formatoptions:{newformat:'Y-m-d'}},
{name:'JZQX', width:30,label:'驾证期限',sortable:true},
{name:'YXQSString', width:30,label:'有效期始',sortable:true,formatter:'date',formatoptions:{newformat:'Y-m-d'}},
{name:'YXQZString', width:30,label:'有效期止',sortable:true,formatter:'date',formatoptions:{newformat:'Y-m-d'}},
{name:'ZXBH', width:30,label:'证芯编号',sortable:true},
{name:'CCLZRQString', width:30,label:'初次领证日期',sortable:true,formatter:'date',formatoptions:{newformat:'Y-m-d'}},
{name:'SYRQString', width:30,label:'下一体检日期',sortable:true,formatter:'date',formatoptions:{newformat:'Y-m-d'}},
{name:'LJJF', width:30,label:'累计积分',sortable:true},
{name:'QFRQString', width:30,label:'清分日期',sortable:true,formatter:'date',formatoptions:{newformat:'Y-m-d'}},
{name:'RYZT', width:30,label:'当前状态',sortable:true},
{name:'LY', width:30,label:'驾驶人来源',sortable:true},
{name:'JXMC', width:30,label:'驾校名称',sortable:true},
{name:'SYYXQZString', width:30,label:'审验有效期止',sortable:true,formatter:'date',formatoptions:{newformat:'Y-m-d'}},
{name:'DJZSXXDZ', width:30,label:'住所地址',sortable:true},
{name:'LXDH', width:30,label:'联系电话',sortable:true},
{name:'LXZSXXDZ', width:30,label:'联系地址',sortable:true},
{name:'LXZSYZBM', width:30,label:'邮政编码',sortable:true},
{name:'FZJG', width:30,label:'发证机关',sortable:true},
{name:'GJ', width:30,label:'国籍',sortable:true},
{name:'ZZZM', width:30,label:'暂住证明',sortable:true}
//{name : 'fbsjString',width : 100,label : '发布时间',sortable : false,formatter:'date',formatoptions:{newformat:'Y-m-d'}}, 
{name : 'updString',width : 100,label : '修改时间',sortable : false,formatter:'date',formatoptions:{newformat:'Y-m-d'}}
//{name : 'remark',width : 100,label : '备注',sortable : false}, 

],
rowNum:20,
rowList:[10,20,30,50,100],
rownumbers:true,
multiselect:true, 
pager: '#gps_trackObject_pager', 
autowidth: true,
height:'240px',
jsonReader: { root: 'root', repeatitems: false, id: 'id' },
/* ondblClickRow:function(rowid,iRow,iCol,e){
$( "#eventBase_view").dialog("open");
$( "#eventBase_view").empty().load("../eventBase/eventBase_tab.do?id="+rowid);
},
onCellSelect:function(rowid,iCol,cellcontent,e){
if(iCol == 2) {
$( "#eventBase_view").dialog("open");
$( "#eventBase_view").empty().load("../eventBase/eventBase_tab.do?id="+rowid);
}
}, */
loadComplete:function(){
$(this).jqGrid('setGridHeight', getHeight());
}
});
/* $("#eventBase_table").navGrid('#gps_trackObject_pager', {
edit : false,
add : false,
del : false,
search : false
}).navButtonAdd('#gps_trackObject_pager', {
caption : "增加",
buttonicon : "ui-icon-add",
onClickButton : function() {

$( "#eventBase_form").dialog("open");
//$( "#gps_trackObject_form").dialog({ width:785 }); 
//$( "#gps_trackObject_form").dialog({ height:480 });
//$( "#gps_trackObject_form").dialog({ position: 'center' });
$( "#eventBase_form").empty().load("../eventBase/eventBase_form.do?id");
},
position : "last"
}).navButtonAdd('#gps_trackObject_pager', {
caption : "删除",
buttonicon : "ui-icon-del",
onClickButton : function() {
//alert("1111111111");
var s= $("#eventBase_table").jqGrid('getGridParam','selarrrow');
var posturl="../eventBase/eventBase_del.do";  
deleteInfo(s,posturl,function(res){
//alert("1111111111"+s);
$('#gps_trackObject_table').trigger( 'reloadGrid' );
alert(res.message);
});

},
position : "last"
}).navButtonAdd('#gps_trackObject_pager', {
caption : "修改",
buttonicon : "ui-icon-update",
onClickButton : function() {

var s; 
  s = $("#eventBase_table").jqGrid('getGridParam','selarrrow');
  var selCount=s.length;

if (selCount==0)
{
alert("你没有选中记录！");
return;
}
if (selCount>1)
{
alert("你选中多条记录，如果是修改只能选择一条记录！");
return;
}

var url="../eventBase/eventBase_form.do";
var posturl=url+"?id="+s[0];
 
$( "#eventBase_form").dialog("open");
$( "#eventBase_form").empty().load(posturl);

},
position : "last"
});


});


$( "#eventBase_form").dialog({
autoOpen: false,
height: 320,
width: 600,
modal: false,
title:'事故信息',
buttons: {
"确定": function() {

//alert("ddd");
var length=25;


var queryString = $("#eventBaseForm").serialize();
//alert(queryString);
var url="../eventBase/eventBase_save.do";
postData(url,queryString,"",function(res){
$( "#eventBase_form" ).dialog( "close" );
alert("保存成功");
$('#eventBase_table').trigger( 'reloadGrid' );
});
},
"取消": function() {
$( this ).dialog( "close" );
}
},

close: function() {
$( this ).empty();
}
});


$( "#eventBase_view").dialog({
autoOpen: false,
height: 350,
width: 420,
modal: true,
title:'事故信息',
buttons: {
"返回": function() {
$( this ).dialog( "close" );
}
},

close: function() {
$( this ).empty();
}
});
function openAttachmentDialog(url){
g_globals.attachmentFormUrl=url;
$( "#patrolPersonDialog").dialog('open');
}
function openAttachmentDialog(url){
g_globals.attachmentFormUrl=url;
$( "#vehicleDialog").dialog('open');
} */
</script>