使用Jquery mobile的ListView中的复选框 [英] Checkbox in ListView with Jquery mobile
问题描述
我开始学习HTML5和CSS(通过Jquery Mobile)，并且由于我在这一领域没有太多背景，所以我很容易陷入困境. 我想在清单视图中放置一个复选框(在每个li处). 我怎么做才能看起来像这样: http://a4 .mzstatic.com/us/r1000/095/Purple/ff/1d/33/mzl.ecpvufek.320x480-75.jpg (我的意思是该复选框位于其他所有文本的左侧).
I am starting to learn HTML5 and CSS (with Jquery Mobile), and because I do not have much background in this area, I am stuck at something very easy. I want to put a checkbox in a listview (at each li). How can I do it in order to look like that : http://a4.mzstatic.com/us/r1000/095/Purple/ff/1d/33/mzl.ecpvufek.320x480-75.jpg (I mean that the checkbox is at the left of the others text and all).
目前，我的代码是: http://jsfiddle.net/AzN7S/ 正如您所看到的，该复选框位于文本上方，即使第二个li中的div带有float:left，它也不起作用:(
For the moment, my code is : http://jsfiddle.net/AzN7S/ And as you can see the checkbox is above the text, and even with a div with a float:left in the second li, it doesn't work :(
你能帮我吗? 事先非常感谢您的回答，对不起我的英语^^
Can you help me please ? Thank you very much beforehand for your answer, and sorry for my english ^^
祝你有美好的一天.
奥利维尔.
我终于成功地在右侧部分的左侧添加了一个复选框. 我更新了示例: http://jsfiddle.net/AzN7S/2/ 我不知道这是否是正确的方法，但是它可以工作:)
I finally succeeded in adding a checkbox at the left of the the right part. I updated my example : http://jsfiddle.net/AzN7S/2/ I do not know if it is the right method, but it works :)
推荐答案
我重新考虑了我的旧答案，并重新做了这个问题，特别是为了适应mvc 4框架，但客户端却完全相同.
让我们开始吧:
如果您只想要html，可以在这里获取它
此链接是一个3部分复选框列表，该复选框，该项目的链接和信息弹出窗口:
i rethought my old answer and re did the issue especially to fit the mvc 4 framework but the client side is all the same.
so lets start:
if you just want the html you can get it here
this link is to a 3 parts checkbox list, the checkbox, the link to the item and the info popup:
此处是jsfiddle的链接，用于带有复选框和图标的工作列表视图
iv在最后添加了两个零件列表框和一个零件，如有任何问题，请告知我.
iv added at the end some 2 parts listbox and a single part, for any questions let me know.
现在对于控制器，您要做的就是
now for the controller all you need to do is
[Authorize]
public ActionResult Items(string act,
string tab, string search_by, string search, string sort, string sortdir, int? page, int? resultsPerPage,
List<int> selected, int? projectId, string username)
{
if (act == "AddItemsToUser")
{
string response;
if (selected != null)
{
response = "Project Items Added:";
foreach (var item in selected)
{
try
{
if (username != null)
if (UserItemRecordModel.InsertUserItem(username, item, null, null, 0, null, null))
response += item + " - inserted, ";
}
catch (Exception ex)
{
response += item + " - " + ex.Message + ", ";
}
}
response.TrimEnd(' ', ',');
}
else
{
response = "No Items Were Selected!";
}
return Json(response, JsonRequestBehavior.AllowGet);
}
else if (act == "AddItemsToProject")
{
string response;
if (selected != null)
{
response = "Project Items Added:";
foreach (var item in selected)
{
try
{
if (projectId != null)
if (ProjectItemRecordModel.InsertProjectItem(projectId.ToString(), item, null, null, 0, null, null))
response += item + " - inserted, ";
}
catch (Exception ex)
{
response += item + " - " + ex.Message + ", ";
}
}
response.TrimEnd(' ', ',');
}
else
{
response = "No Items Were Selected!";
}
return Json(response, JsonRequestBehavior.AllowGet);
}
else if (act == "RemoveItemsFromUser")
{
string response;
if (selected != null)
{
response = "Project Items Removed:";
foreach (var item in selected)
{
try
{
if (UserItemRecordModel.DeleteUserItem(username, item))
response += item + " - deleted, ";
}
catch (Exception ex)
{
response += item + " - " + ex.Message + ", ";
}
}
response.TrimEnd(' ', ',');
}
else
{
response = "No Items Were Selected!";
}
return Json(response, JsonRequestBehavior.AllowGet);
}
else if (act == "RemoveItemsFromProject")
{
string response;
if (selected != null)
{
response = "Project Items Removed:";
foreach (var item in selected)
{
if (ProjectItemRecordModel.DeleteProjectItem(projectId.ToString(), item))
response += item + " - deleted, ";
}
response.TrimEnd(' ', ',');
}
else
{
response = "No Items Were Selected!";
}
return Json(response, JsonRequestBehavior.AllowGet);
}
List<ItemRecordModel> items = ItemRecordModel.GetSensors(search_by, search, sort, sortdir);
return View("Items", new AdminRecordsViewModel() { Records = items });
}
这是我的旧答案:
我解决了您的问题，您需要更改一些内容，但是您可以使用复选框来完成可搜索的listview，如下所示:
this was my old answer:
i solved your problem you need to change some stuff but you can accomplish a searchable listview with checkbox like so:
jsfiddle示例:
jsfiddle example:
基本: 基本jsfiddle版本
nicer版本: 更好的版本
nicer version: nicer version
这篇关于使用Jquery mobile的ListView中的复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
