Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Фильтр таблиц (https://javascript.ru/forum/dom-window/23010-filtr-tablic.html)

Georgy 08.11.2011 21:09

Фильтр таблиц
 
Здравствуйте.

Подскажите, пожалуйста, как сделать кнопку фильтрации таблицы?
То есть задача такова: php выгружается таблица из БД,и как сделать чтобы сверху была кнопка, при нажатии на которую можно выбрать название и таблица фильтруется (отображается только выбранное).

Подойдет любая подсказка - от примеров такого скрипта до хотя бы направления в котором стоит искать.

Спасибо.

ksa 08.11.2011 21:10

Цитата:

Сообщение от Georgy
Подойдет любая подсказка

Начинай делать тестовый пример... ;)

Georgy 08.11.2011 22:02

Цитата:

Сообщение от ksa (Сообщение 135291)
Начинай делать тестовый пример... ;)

спасибо) я как раз делаю.
Пока вот что нашел - использование Tabular Data, но он работает только в Internet Explorer. Есть какие-нибудь альтернативы?

ksa 09.11.2011 09:51

Цитата:

Сообщение от Georgy
Есть какие-нибудь альтернативы?

Таки выкинуть ПХП и перейти уже на zen. :lol:

XData Contents [ XMLNamespace = "http://www.intersystems.com/zen" ]
{
<page xmlns="http://www.intersystems.com/zen" title="">
<html>
	<h1>Список работ</h1>
</html>
<hgroup width="100%" cellVAlign="top">
	<vgroup id="gTbl" width="90%" cellVAlign="top">
		<tableNavigator id="tnJob" tablePaneId="tpJob" align="right"/>
		<tablePane 
			id="tpJob" 
			tableName="wrk.Job" 
			valueColumn="ID"
			pageSize="50" 
			useSnapshot="true" 
			caption="Работы" 
			onselectrow='zenPage.Select(zenThis.getValue("ID"))'
			ondblclick='zenPage.Edit(zenThis.getValue("ID"));' 
			showValueInTooltip='true'
			OnCreateResultSet="CrtSQL"
		>
			<column 
				header="Id" 
				colName="ID" 
				hidden="true"
			/>
			<column 
				header="Название" 
				colName="Name" 
				filterType="text"
			/>
			<column 
				header="Исполнители" 
				colName="Member" 
				width="180px"
				filterType="query"
				filterQuery="Select Name From wrk.Member Order by Name"
			/>
			<column 
				header="Завершение" 
				colName="Brk" 
				width="120px"
			/>
			<column 
				header="Квартал" 
				colName="Kvartal" 
				width="130px"
			/>
			<column 
				header="Ok" 
				colName="Ok" 
				width="40px"
				filterType="enum"
				filterEnum="Да,Нет"
			/>
		</tablePane>
	</vgroup>
	<dataController id="cnJob" modelClass="wrk.Job"/>
	<spacer width="10px" />
	<vgroup id="gBtn" cellVAlign="top">
		<button 
			id="bExit" 
			caption="Выход" 
			onclick="zenPage.Go('wrk.ZEN.Menu.cls');" 
			controlClass="btn"
		/>
		<button 
			id="bLoad" 
			caption="Обновить" 
			onclick="zenPage.Load();" 
			controlClass="btn"
		/>
		<fieldSet legend="Работу">
			<button 
				id="bAdd" 
				caption="Добавить" 
				onclick="zenPage.Add();" 
				controlClass="btn"
			/>
			<button 
				id="bDel" 
				caption="Удалить" 
				onclick="zenPage.Del();" 
				controlClass="btn"
			/>
		</fieldSet>
	</vgroup>
</hgroup>
</page>
}

/// Построение запроса для отображения таблицы
Method CrtSQL(Output tSC As %Status, pInfo As %ZEN.Auxiliary.QueryInfo) As %ResultSet
{
	Set tRS = ""
	
	Set tSC = $$$OK
	Set tSELECT = "ID,Name,"
	Set tSELECT = tSELECT_"wrk.Job_AllMember(ID) as Member,"
	Set tSELECT = tSELECT_"dEnd as Brk,"
	Set tSELECT = tSELECT_"wrk.Plan_KvrToStr(Plan->ID) as Kvartal,"
	Set tSELECT = tSELECT_"wrk.Job_Ok(ID) as Ok"
	Set tFROM = "wrk.Job as a"
	Set tWHERE = ""
	Set tORDER = "dCreate desc,Member"
	// строим критерии отбора по фильтрам
	If $g(pInfo.filters("Name"))'="" {
		Set tWHERE = tWHERE_"Upper(Name) [ Upper('"_pInfo.filters("Name")_"') "
	}
	If $g(pInfo.filters("Member"))'="" {
		Set:tWHERE'="" tWHERE=tWHERE_" AND "
		Set tWHERE=tWHERE_"wrk.Job_AllMember(ID)['"_ pInfo.filters("Member")_"'"
	}
	If $g(pInfo.filters("Ok"))'="" {
		Set:tWHERE'="" tWHERE=tWHERE_" AND "
		s ok="<>"
		s:pInfo.filters("Ok")="Да" ok="="
		Set tWHERE=tWHERE_"wrk.Job_Ok(ID)"_ok_"'Да'"
	}
	Set sql = "SELECT " _ tSELECT _ " FROM " _ tFROM
	Set:tWHERE'="" sql = sql _ " WHERE " _tWHERE
	Set:tORDER'="" sql = sql _ " ORDER BY " _tORDER
	Set tRS = ##class(%ResultSet).%New()
	Set tSC = tRS.Prepare(sql)
	Set pInfo.queryText = sql
	Quit tRS
}

И ты уже имеешь вот такую страничку с табличкой



Там три фильтра. Помимо этого, если клацать на заголовки столбцов, будет выполняться сортировка таблицы по данным столбца, как по "возрастанию" так и по "убыванию".
Причём в сортировке будет учитываться типаж данных в колонке (строка, дата, время, число и п.р.)...

Georgy 10.11.2011 14:51

ksa,
спасибо большое! Сейчас начну разбираться.


nasqad,
тут же только сортировка, разве нет? Мне просто нужна именно кнопа автофильтра с возможностью выбрать строки.

ksa 10.11.2011 14:52

Цитата:

Сообщение от Georgy
Сейчас начну разбираться.

Велкам ту Cache DataBase! :lol:

Georgy 02.12.2011 20:57

Чтобы не плодить тем, задам еще 1 вопрос здесь=):

Вот есть таблица с 2 колонками, в 1 находятся кнопки, в другой другая таблица.
Вот внутренняя таблица состоит из: наименование и checkbox:

echo '<tr>
<td width = "400px">'.$DN.'</td>
<td width = "40px" align="middle"><input type="checkbox" onclick = "" id="'.$DC.'" name = "Det['.$i.']" value="on"/></td>
</tr>';


Мне нужно добавить кнопку, чтобы при нажатии отправился массив таких checkbox'ов в другой php файл. Проблема в том, что кнопка эта будет находиться в другой колонке внешней таблицы (то есть в 1 колонке внешней таблицы находится таблица с checkbox'ами, в другой-эта кнопка).
Как создать такую кнопку:) ? Возможно вопрос глупый, или я запутано объяснил, но я не знаю как это сделать.:)

Georgy 03.12.2011 14:12

Итак, вот что придумал, но почему-то не работает:
<p><a class="Link1 href="javascript:SendForm()">Ссылка</a></p>

И javascript:
function SendForm(){
	var checkboxes = document.getElementsByName('Det[]');
        var i = checkboxes.length;

	var SendData = document.createElement("form"); 
	SendData.action = "test.php"; 
	SendData.method = 'POST';
	SendData.id = 'SendID';
	var NewData = new Array(i);
	while(i--) {
	               if (checkboxes[i].checked == true) {
			    NewData[i] = document.createElement("input");
			    NewData[i].name = 'Det['+i+']';
			    NewData[i].type = 'hidden'; 
			    NewData[i].value = checkboxes[i].id; 
			    SendData.appendChild(NewData[i]);
			}
	              }
      document.getElementsByTagName('body')[0].appendChild(SendData);  
	SendData.submit();
	return false;	          
	}


Но данные не отправляются:(. В чем ошибка?

ksa 03.12.2011 16:46

Цитата:

Сообщение от Georgy
В чем ошибка?

Вероятно в неправильной хтмл-разметке...

Georgy 03.12.2011 17:28

Там стоит скобка=) просто она почему-то стерлась.
<p><a class="Link1" href="javascript:SendForm()">Ссылка</a></p>

Конечно, всё так выглядит.


Часовой пояс GMT +3, время: 19:57.