Да, это возможно.
Использовать YUI datatable . Работает даже с JQuery.
Хотя в этом примере используется выбор строк, вы можете использовать выбор столбцов
Вы можете использовать любой формат ввода, включая JSON, таблицу HTML, XML и текст. Поле ввода не требуется. Я использую somenting как
Приложение http://img74.imageshack.us/img74/1833/singled.gif
В соответствии с вышеизложенным, когда я щелкаю (да, щелкаю мышью) одну строку, она будет выделена (выбрана) и будут применены поддерживаемые действия (Изменить). Поддерживаемые действия будут применяться в соответствии с требованиями вашего бизнеса
В вашем случае таблицу HTML вы настраиваете согласно (Вы можете проверить ее, если хотите):
Сначала давайте настроим CSS и JavaScript
<!-- Combo-handled YUI CSS files: -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.7.0/build/paginator/assets/skins/sam/paginator.css&2.7.0/build/datatable/assets/skins/sam/datatable.css">
<style type="text/css">
.center {text-align:center;}
</style>
<!-- Combo-handled YUI JS files: -->
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.7.0/build/yahoo-dom-event/yahoo-dom-event.js&2.7.0/build/connection/connection-min.js&2.7.0/build/element/element-min.js&2.7.0/build/paginator/paginator-min.js&2.7.0/build/datasource/datasource-min.js&2.7.0/build/datatable/datatable-min.js&2.7.0/build/json/json-min.js"></script>
Наше тело (генерируется на стороне сервера)
<body class="yui-skin-sam">
<div id="container">
<table id="source">
<thead>
<tr>
<th>AAA</th>
<th>BBB</th>
<th>CCC</th>
<th>HIDDEN</th>
</tr>
</thead>
<tbody>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>0</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>1</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>2</td>
</tr>
</tbody>
</table>
</div>
<div id="actionContainer">
<a id="action" href="#">Edit row</a>
</div>
</body>
Теперь давайте настроим скрипт после тела (код с комментариями)
<script type="text/javascript">
var settings = {
widgetList:{
reference:null,
datatable:{
columnSettings:[
// key attribute matches key attribute in dataSource fields attribute - see bellow
{key:"AAA", label:"A custom label"},
// if label is omitted, default to key value
// className customizes a class to apply to a column
{key:"BBB", className:"center"},
{key:"CCC"},
// i do not want to show id value, so i hide it through hidden attribute
{key:"HIDDEN", hidden:true},
// i want to generate a custom value regardless dataSource, so i set up a custom formatter function - see below
{key:"CUSTOM", label:"A custom value", formatter:customValue}
],
settings:{
selectionMode:"single"
}
}, // eof datatable
dataSource:{
// use $("#source")[0] whether you use JQuery (do not forget set up JQuery)
// source points to data that will populate our datatable
// in our case data will be retrieved from a HTML table
// see responseType bellow
source:YAHOO.util.Dom.get("source"),
settings:{
responseSchema:{
fields:[
// key attribute matches th content
{key:"AAA"},
{key:"BBB"},
{key:"CCC"},
{key:"HIDDEN"}],
// set up input
responseType:YAHOO.util.DataSource.TYPE_HTMLTABLE
}
}
}, // eof dataSource
create:function() {
this.reference = new YAHOO.widget.DataTable("container", this.datatable.columnSettings, new YAHOO.util.DataSource(this.dataSource.source, this.dataSource.settings), this.datatable.settings);
} // eof create
} // eof widgetList
}; // eof setting
// sets up custom value
function customValue(container, record, column, data) {
// container references a cell
container.innerHTML = record.getData("AAA") + " - " + record.getData("BBB") + " - " + record.getData("CCC") + " - " + record.getData("HIDDEN");
}
(function() {
// use $("#actionContainer").set("display", "none"); in JQuery
YAHOO.util.Dom.setStyle("actionContainer", "display", "none");
settings.widgetList.create();
// RIA applications
YAHOO.util.Event.addListener("action", "click", function(e) {
e.preventDefault();
var datatable = settings.widgetList.reference;
var recordArray = datatable.getRecordSet().getRecords();
for(var i = 0; i < recordArray.length; i++) {
if(datatable.isSelected(recordArray[i])) {
alert("You have selected id: " + recordArray[i].getData("HIDDEN") + "\nYou can use a JQuery dialog to collect data changes");
}
}
});
// rowClickEvent - use subscribe
settings.widgetList.reference.subscribe("rowClickEvent", function(args) {
// args.target is a Record instance
if(this.isSelected(args.target)) {
this.unselectRow(args.target);
YAHOO.util.Dom.setStyle("actionContainer", "display", "none");
} else {
this.unselectAllRows();
this.selectRow(args.target);
YAHOO.util.Dom.setStyle("actionContainer", "display", "block");
}
});
})();
</script>
</html>
Минимальные изменения требуются, если вы используете JSON, XML или текст. Не стесняйтесь спрашивать их.
Чтобы использовать выбор столбца, используйте вместо него columnClickEvent.
С уважением,