EasyUI

一、Combox

       1.动态赋值下拉框和下拉panel高度设置，数据结构

        <input class="easyui-combobox" id="pro_City" name="language"

data-options="
valueField:'Limeid', 
textField:'Pro_LisenQX',
data:'json格式数据‘’，//或url:（一般处理程序从数据库查询数据）"http://" + URLName + "/Service/InitComboxHandler.ashx";

method:'get',

panelHeight:'auto',  //下来panel高度
required:true  //必选一个验证

"/>

2.function方法设置

function InitCombobox() {

$("#qy").combobox({
prompt: '请选择区域',
url: "http://" + URLName + "/Service/UerGL.ashx",
valueField: 'XZQ_VALUE',
textField: 'XZQ_NAME',
multiple: true,//设置可以多选
queryParams: {
lx: "xzq"
},
});

}

3.json格式

[{ "Limeid": "1", "Pro_LisenQX": "一个月" },
{ "Limeid": "2", "Pro_LisenQX": "三个月" },
{ "Limeid": "3", "Pro_LisenQX": "六个月" }]

4.获取combox选中数据

$('#pro_City').combobox('getText'),
 $('#pro_City').combobox('getValue')

二.datagrid

1.界面设计

<table id="dg" class="easyui-datagrid" title="产品信息" style="width: 700px; height: auto"

data-options="
singleSelect: true,//单选
toolbar: '#tb',//绑定编辑按钮
url: 'datagrid_data1.json',//初始化数据绑定
method: 'get',
onClickRow: onClickRow,//行编辑函数
onEndEdit: onEndEdit,//结束编辑函数
onClickCell: onClickCell //字段编辑函数
">
<thead>
<tr>
<th data-options="field:'pro_YYXM',width:80,align:'center',editor:'textbox' ">应用项目</th>
<th data-options="field:'pro_NAME',width:100,
formatter:function(value,row){
return row.Pro_NAME;
},
editor:{
type:'combobox',
options:{
valueField:'Pro_NAME',
textField:'Pro_NAME',
method:'get',
url: urlDataName,
editable: false,
required:true,
panelHeight:100
}
}">产品名称</th>//下拉框
<th data-options="field:'pro_BZ',width:250,editor:'textbox'">备注</th>//文本框
 <th data-options="field:'status',width:60,align:'center',editor:{type:'checkbox',options:{on:'是',off:''}}">选择</th>//选择框

</tr>
</thead>

</table>

    2.函数设置

function onEndEdit(index, row) {
var row = $('#dg').datagrid('getSelected'); //获取选中行对象
var edYYXM = $(this).datagrid('getEditor', {
index: index,
field: 'pro_YYXM'
});
row.Pro_NAME = $(edYYXM.target).combobox('getText');  //设置下来框选中后row中值
}

    3.动态设置table参数

$("#tabUser").datagrid({
url: "http://" + URLName + "/Service/ProductApplyService.ashx", //动态绑定数据
loadMsg: '正在加载......',  //提示信息
toolbar: tool2,   //绑定编辑按钮
queryParams: {
     lx: "1",                       //参数
    con: ""
}
});

4.编辑按钮声明

var tool2 = [
{
text: '添加发送人',
iconCls: 'icon-man',
handler: function () {
$("#tabUser").datagrid({
url: "http://" + URLName + "/Service/ProductApplyService.ashx",
loadMsg: '正在加载......',
toolbar: tool2,
queryParams: {
lx: "1"
}
});
}
}, {
text: 'OK',
iconCls: 'icon-ok',
handler: function () {
var ids;
var selRows = $('#tabUser').datagrid('getChecked');
if (selRows == null) return;
if (selRows.length == 0) return;
ids = new Array(selRows.length);
if (selRows.length > 0) {
for (var i = 0; i < selRows.length; i++) {
ids[i] = selRows[i].UserId;
}
}
$.ajax({
type: "POST",
contentType: "application/json;utf-8",
url: "http://" + URLName + "/Service/LandService.asmx/UserApply",
data: "{\"objJson\":'" + Serialize(ids) + "',\"lx\":'1',\"newlx\":'3'}",
dataType: 'json',
success: FunSuccess,
error: FunError
});
}}, '-', '-', {text: '取消发送人',

iconCls: 'icon-man',
handler: function () {
$("#tabUser").datagrid({
url: "http://" + URLName + "/Service/ProductApplyService.ashx",
loadMsg: '正在加载......',
toolbar: tool2,
queryParams: {
lx: "3"
}
});
}
}, {
text: 'OK',
iconCls: 'icon-ok',
handler: function () {
var ids;
var selRows = $('#tabUser').datagrid('getChecked');
if (selRows == null) return;
if (selRows.length == 0) return;
ids = new Array(selRows.length);
if (selRows.length > 0) {
for (var i = 0; i < selRows.length; i++) {
ids[i] = selRows[i].UserId;
}
}

}
];