mvc3 + easyui 开发学习笔记------- easyui combobox 加载列表项
2014-10-10 14:19
453 查看
jQuery EasyUI 1.4
jQuery v1.11.1
参考自:http://www.jeasyui.com/demo/main/index.php?plugin=ComboBox&theme=default&dir=ltr&pitem=
加载列表的方式可以参考其中。
这里把我使用的方式贴出来。只是部分的代码,仅供参考。
<input id="input_Year" class="easyui-combobox" name="input_Year" style="width:70px;" data-options="panelHeight:'auto'" />
<input id="input_language" class="easyui-combobox" name="input_language" style="width:70px;" data-options="panelHeight:'auto'" />
<input id="input_OrderState" class="easyui-combobox" name="input_OrderState" style="width:70px;" data-options="panelHeight:'auto'" />
<script type="text/javascript">
var year = [];
var cyear = new Date().getFullYear();
//添加json字符串到数组中
for (var y = (cyear-4); y <= cyear; y++) {
if (y == cyear) {
year.push('{ "val":"' + y + '", "txt":"' + y + '年",selected:true }');
} else {
year.push('{ "val":"' + y + '", "txt":"' + y + '年"}');
}
}
$(function () {
$('#input_Year').combobox({
data: eval('[' + year.join(',') + ']'),
valueField: 'val',
textField: 'txt'
});
});
//如果列表数据是从后台读取出来,那么就在后台把列表转换成json格式的字符串写到js里
//Model.OrderStateJson 既是转换后的json字符串
var orderState= eval("@Html.Raw(Model.OrderStateJson)");
$(function () {
$('#input_OrderState').combobox({
data: orderState,
valueField: 'id',
textField: 'text'
});
});
//直接初始化json结构
var language=[{'id':'1','text':'Alabama'},{'id':'2;','text':'Alaska'},{'id':'3','text':'California','selected':true}];
$(function () {
$('#input_Year').combobox({
data: language,
valueField: 'id',
textField: 'text'
});
});
</script>
//Controller
MyViewModel mvm=new MyViewModel();
public ActionResult Index()
{
mvm.OrderStateJson = LotteryListToJson("");
return View(mvm);
}
//
public Dictionary<string, string> OrderState
{
get;
set;
}
/// <summary>
/// 列表转换为json格式字符串。
/// </summary>
/// <param name="p_value">需要设置选中项的value</param>
/// <returns></returns>
public string OrderStateToJson(string p_value)
{
StringBuilder json = new StringBuilder();
//OrderState 数据源自xml文件。
var orderStateList = from s in OrderState
orderby s.Key
select new SelectListItem
{
Text = s.Value,
Value = s.Key.ToString(),
Selected = false
};
foreach(SelectListItem item in orderStateList)
{
if(json.Length == 0 || item.Value == p_value )
{
json.Append("{ 'id':" + item.Value + ",'text':'" + item.Text + "','desc':'','selected':true },");
} else
{
json.Append("{ 'id':" + item.Value + ",'text':'" + item.Text + "','desc':'' },");
}
}
string reText = "[" + json.ToString() + "]";
return reText;
}
public class MyViewModel{
public string OrderStateJson
{
set;
get;
}
}
jQuery v1.11.1
参考自:http://www.jeasyui.com/demo/main/index.php?plugin=ComboBox&theme=default&dir=ltr&pitem=
加载列表的方式可以参考其中。
这里把我使用的方式贴出来。只是部分的代码,仅供参考。
<input id="input_Year" class="easyui-combobox" name="input_Year" style="width:70px;" data-options="panelHeight:'auto'" />
<input id="input_language" class="easyui-combobox" name="input_language" style="width:70px;" data-options="panelHeight:'auto'" />
<input id="input_OrderState" class="easyui-combobox" name="input_OrderState" style="width:70px;" data-options="panelHeight:'auto'" />
<script type="text/javascript">
var year = [];
var cyear = new Date().getFullYear();
//添加json字符串到数组中
for (var y = (cyear-4); y <= cyear; y++) {
if (y == cyear) {
year.push('{ "val":"' + y + '", "txt":"' + y + '年",selected:true }');
} else {
year.push('{ "val":"' + y + '", "txt":"' + y + '年"}');
}
}
$(function () {
$('#input_Year').combobox({
data: eval('[' + year.join(',') + ']'),
valueField: 'val',
textField: 'txt'
});
});
//如果列表数据是从后台读取出来,那么就在后台把列表转换成json格式的字符串写到js里
//Model.OrderStateJson 既是转换后的json字符串
var orderState= eval("@Html.Raw(Model.OrderStateJson)");
$(function () {
$('#input_OrderState').combobox({
data: orderState,
valueField: 'id',
textField: 'text'
});
});
//直接初始化json结构
var language=[{'id':'1','text':'Alabama'},{'id':'2;','text':'Alaska'},{'id':'3','text':'California','selected':true}];
$(function () {
$('#input_Year').combobox({
data: language,
valueField: 'id',
textField: 'text'
});
});
</script>
//Controller
MyViewModel mvm=new MyViewModel();
public ActionResult Index()
{
mvm.OrderStateJson = LotteryListToJson("");
return View(mvm);
}
//
public Dictionary<string, string> OrderState
{
get;
set;
}
/// <summary>
/// 列表转换为json格式字符串。
/// </summary>
/// <param name="p_value">需要设置选中项的value</param>
/// <returns></returns>
public string OrderStateToJson(string p_value)
{
StringBuilder json = new StringBuilder();
//OrderState 数据源自xml文件。
var orderStateList = from s in OrderState
orderby s.Key
select new SelectListItem
{
Text = s.Value,
Value = s.Key.ToString(),
Selected = false
};
foreach(SelectListItem item in orderStateList)
{
if(json.Length == 0 || item.Value == p_value )
{
json.Append("{ 'id':" + item.Value + ",'text':'" + item.Text + "','desc':'','selected':true },");
} else
{
json.Append("{ 'id':" + item.Value + ",'text':'" + item.Text + "','desc':'' },");
}
}
string reText = "[" + json.ToString() + "]";
return reText;
}
public class MyViewModel{
public string OrderStateJson
{
set;
get;
}
}
相关文章推荐
- MVC3.0入门学习笔记-Razor 之样式加载方式2
- Android应用开发学习笔记之列表选择框
- 斯坦福大学iOS应用开发教程学习笔记(第一课)MVC.and.Introduction.to.Objective-C
- [转]ASP.Net MVC开发基础学习笔记(3):Razor视图引擎、控制器与路由机制学习
- 斯坦福大学iOS应用开发教程学习笔记(第一课) MVC/Objective-C
- iPhone开发学习笔记——Xib设计UITableViewCell然后动态加载
- ASP.Net MVC开发基础学习笔记:二、HtmlHelper与扩展方法
- iPhone开发学习笔记002——Xib设计UITableViewCell然后动态加载
- ASP.Net MVC开发基础学习笔记:四、校验、AJAX与过滤器
- EasyUI学习笔记7:MIS开发利器_ datagrid插件(中)
- 2011斯坦福大学iOS应用开发教程学习笔记(第一课)MVC.and.Introduction.to.Objective-C
- 2011斯坦福大学iOS应用开发教程学习笔记(第一课)MVC.and.Introduction.to.Objective-C
- iPhone开发学习笔记002――Xib设计UITableViewCell然后动态加载
- EasyUI学习笔记6:MIS开发利器_ datagrid插件(上)
- iPhone开发学习笔记002——Xib设计UITableViewCell然后动态加载
- 2011斯坦福大学iOS应用开发教程学习笔记(第一课)MVC.and.Introduction.to.Objective-C
- easyui学习笔记8—在手风琴中加载其他的页面
- 2011斯坦福大学iOS应用开发教程学习笔记(第一课)MVC.and.Introduction.to.Objective-C
- Spring 学习笔记-- <mvc:default-servlet-handler />默认加载simpleurlhandlermapping
- 2011斯坦福大学iOS应用开发教程学习笔记(第一课)MVC.and.Introduction.to.Objective-C