您的位置:首页 > 产品设计 > UI/UE

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;

}

}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐