1. 程式人生 > >jQuery在web專案中增刪改查的應用

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>