<%@taglib prefix="s" uri="/struts-tags" %>
<%@ taglib prefix="sj" uri="/struts-jquery-tags" %>
<%@ taglib prefix="sjg" uri="/struts-jquery-grid-tags" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>AJAX JSP PAGE</title>
<sj:head jqueryui="true" jquerytheme="redmond" />
<link rel="stylesheet" href="/struts2-jquery-grid-showcase-3.5.0/jqwidgets/styles/jqx.base.css"
type="text/css" />
<link rel="stylesheet" href="/struts2-jquery-grid-showcase-3.5.0/jqwidgets/styles/jqx.darkblue.css"
type="text/css" />
<script type="text/javascript" src="/struts2-jquery-grid-showcase-3.5.0/scripts/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="/struts2-jquery-grid-showcase-3.5.0/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="/struts2-jquery-grid-showcase-3.5.0/jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="/struts2-jquery-grid-showcase-3.5.0/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="/struts2-jquery-grid-showcase-3.5.0/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="/struts2-jquery-grid-showcase-3.5.0/jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="/struts2-jquery-grid-showcase-3.5.0/jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="/struts2-jquery-grid-showcase-3.5.0/jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="/struts2-jquery-grid-showcase-3.5.0/jqwidgets/jqxgrid.filter.js"></script>
<script type="text/javascript" src="/struts2-jquery-grid-showcase-3.5.0/jqwidgets/jqxgrid.sort.js"></script>
<script type="text/javascript" src="/struts2-jquery-grid-showcase-3.5.0/jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="/struts2-jquery-grid-showcase-3.5.0/jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="/struts2-jquery-grid-showcase-3.5.0/jqwidgets/jqxtabs.js"></script>
<script type="text/javascript">
$(document)
.ready(function () {
// prepare the data
$('#jqxTabs')
.jqxTabs({
width: 550,
height: 150
});
$("#myButton")
.jqxButton({
width: '280px',
height: '35px',
theme: 'darkblue'
});
var input1Val = "";
var input2Val = "";
var input3Val = "";
$("#input1")
.keyup(function () {
input1Val = $("#input1")
.val()
myfunction();
});
function myfunction() {
var source = {
datatype: "json",
datafields: [{
name: 'name',
type: 'string'
}, {
name: 'age',
type: 'number'
}, {
name: 'gender',
type: 'string'
}, {
name: 'studentId',
type: 'string'
}, {
name: 'homeAddress',
type: 'string'
}, {
name: 'area',
type: 'string'
}, {
name: 'fathersName',
type: 'string'
}, {
name: 'button',
type: 'string'
}, ],
id: 'id',
url: 'callAJax.action?t=' + Math.random() + '&name=' + input1Val,
async: true,
sortcolumn: 'name',
sortdirection: 'asc',
};
var dataAdapter = new $.jqx.dataAdapter(source, {
loadComplete: function (data) {},
loadError: function (xhr, status, error) {}
});
$("#jqxgrid")
.jqxGrid({
width: 900,
height: 450,
sortable: true,
filterable: true,
altrows: true,
source: dataAdapter,
columns: [{
text: 'name',
datafield: 'name',
width: 100,
cellsformat: 'c2'
}, {
text: 'Age',
datafield: 'age',
width: 50
}, {
text: 'Gender',
datafield: 'gender',
width: 80
}, {
text: 'Student Id',
datafield: 'studentId',
width: 120
}, {
text: 'Home Address',
datafield: 'homeAddress',
width: 180
}, {
text: 'Area',
datafield: 'area',
width: 100,
cellsalign: 'right'
}, {
text: 'Fathers Name',
datafield: 'fathersName',
width: 120
}, {
text: 'Print',
datafield: 'button',
width: 100
}, {
text: 'Id',
datafield: 'id',
width: 50
}, ],
gridComplete: function () {
alert("gridcomplete()");
},
});
$('#events')
.jqxPanel({
width: 300,
height: 80,
theme: theme
});
$("#jqxgrid")
.bind("sort", function (event) {
$("#events")
.jqxPanel('clearcontent');
var sortinformation = event.args.sortinformation;
var sortdirection = sortinformation.sortdirection.ascending ? "ascending" : "descending";
if (!sortinformation.sortdirection.ascending && !sortinformation.sortdirection.descending) {
sortdirection = "null";
}
var eventData = "Triggered 'sort' event <div>Column:" + sortinformation.sortcolumn + ", Direction: " + sortdirection + "</div>";
$('#events')
.jqxPanel('prepend', '<div style="margin-top: 5px;">' + eventData + '</div>');
});
$('#clearsortingbutton')
.jqxButton({
height: 25,
theme: theme
});
$('#sortbackground')
.jqxCheckBox({
checked: true,
height: 25,
theme: theme
});
// clear the sorting.
$('#clearsortingbutton')
.click(function () {
$("#jqxgrid")
.jqxGrid('removesort');
});
// show/hide sort background
$('#sortbackground')
.bind('change', function (event) {
$("#jqxgrid")
.jqxGrid({
showsortcolumnbackground: event.args.checked
});
});
}
});
</script>
</head>
<body>
<center>
<br />
<button id="button1" name="button">Click to make Jquery Ajax request</button>
<br />Populates data here.
<br/>
<table id="list2"></table>
<div id="pager2"></div>
<br />
<br />
<input type="button" name="button" id='myButton' onclick="setStart();"
value="Click to make Javascript Ajax request" />
<br/>Javascript Ajax call output
<br/>
<div id="intValueDiv" style="color: red;font-weight: bold"></div>
<br/>
<br/>
<div style="margin-top: 30px;">
<input id="resizeButton" type="button" value="Auto Resize Columns" />
<br/>
<input type="text" id="input1" name="input1" />
</div>
<br/>
<br/>
<div id="jqxgrid"></div>
</center>
</body>
</html>
我可以动态加载数据。但现在我想
1）向每行添加按钮。 2）单击时，想要访问行值并进行ajax调用。
任何人都可以告诉我所需的更改。
请重新发布完整代码。这真的非常有用。
感谢。
答案 0 :(得分：-1)
我在http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm?(arctic)#demos/jqxgrid/popupediting.htm成功使用了此信息。我看到它做了什么，然后查看了View Source来完成学习方法。花了我大约30分钟。完成所有工作并不坏。