相关文章推荐
热心的罐头  ·  在时间序列中使用set_index从Data ...·  2 年前    · 
威武的火车  ·  使用react-cropper结合图片压缩方 ...·  2 年前    · 
儒雅的保温杯  ·  如何借助glide lib在对话中显示GIF?·  2 年前    · 
深沉的生菜  ·  使用Web前端技术开发桌面应用---Elec ...·  2 年前    · 
深情的鸵鸟  ·  es嵌套聚合dsl(求均值,求和)_es ...·  2 年前    · 
小百科  ›  在EasyUI的DataGrid中嵌入Combobox-腾讯云开发者社区-腾讯云
combobox datagrid
还单身的黑框眼镜
1 年前
作者头像
DannyHoo
0 篇文章

在EasyUI的DataGrid中嵌入Combobox

前往专栏
腾讯云
开发者社区
文档 意见反馈 控制台
首页
学习
活动
专区
工具
TVP
文章/答案/技术大牛
发布
首页
学习
活动
专区
工具
TVP
返回腾讯云官网
社区首页 > 专栏 > Danny的专栏 > 在EasyUI的DataGrid中嵌入Combobox

在EasyUI的DataGrid中嵌入Combobox

作者头像
DannyHoo
发布 于 2018-09-13 11:48:55
3.2K 0
发布 于 2018-09-13 11:48:55
举报

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/huyuyang6688/article/details/46687767

在做项目时,需要在EasyUI的DataGrid中嵌入Combobox,花了好几天功夫,在大家的帮助下,终于看到了它的庐山真面:

核心代码如下:

<html>
    @*添加Jquery EasyUI的样式*@
    <link href="@Url.Content("../../Content/JqueryEasyUI/themes/default/easyui.css")" rel="stylesheet" />
    <link href="@Url.Content("../../Content/JqueryEasyUI/themes/icon.css")" rel="stylesheet" />
    @*添加Jquery,EasyUI和easyUI的语言包的JS文件*@
    <script src="@Url.Content("../../Content/JqueryEasyUI/jquery-1.8.0.min.js")"></script>
    <script src="@Url.Content("../../Content/JqueryEasyUI/jquery.easyui.min.js")"></script>
    <script src="@Url.Content("../../Content/JqueryEasyUI/locale/easyui-lang-zh_CN.js")"></script>
    @*实现对EasyUI的DataGird控件操作的JS代码*@
    <script type="text/javascript">
        $(function () {
            //当页面首次刷新的时候执行的事件
            initTable();    
        //实现新闻DataGird控件的绑定操作
        function initTable(queryData) {
            $('#test').datagrid({            //定位到Table标签,Table标签的ID是test
                fitColumns: true,
                url: '/News/QueryAllNews',   //指向后台的Action来获取当前用户的信息的Json格式的数据
                title: '新闻公告',           //表格标题
                striped: true,               //斑马线效果
                pagination: true,            //分页工具栏
                rownumbers: true,            //显示行号
                onClickCell: onClickCell,    //点击单元格触发的事件(重要)
                onAfterEdit:onAfterEdit,     //编辑单元格之后触发的事件(重要)
                idField: 'NewsID',           //标识字段
                queryParams: queryData,      //异步查询的参数
                columns: [[
	                  { field: 'ck', checkbox: true },
	                  { title: '主键', field: 'NewsID', sortable: true, hidden: true, },
                    <span style="white-space:pre">	</span>  { title: '内容标题', field: 'NewsTitle', width: 50, sortable: true },
                  <span style="white-space:pre">	</span>  { title: '具体内容', field: 'NewsContent', sortable: true, hidden: true, },
                  <span style="white-space:pre">	</span>  { title: '创建时间', field: 'TimeStamp', sortable: true, },
                  <span style="white-space:pre">	</span>  { title: '所属类别', field: 'CategoryName', sortable: true, },
                  <span style="white-space:pre">	</span>  { title: '创建人', field: 'UserName', sortable: true },
                   <span style="white-space:pre">	</span>  {
                            title: '是否在首页显示', field: 'IsShow', sortable: true,                      
                            editor: {
                                      type: 'combobox',
                                      options: {                             
                                                 valueField: 'text',
                                                 textField: 'text',
                                                 method: 'get',
                                                 url: '/News/ReturnIsShowData',
                                                 required: true
                toolbar: [{
                    id: 'btnadd',
                    text: '添加',
                    iconCls: 'icon-add',
                    handler: function () {
                        //实现弹出注册信息的页面
                        AddNews();
                }, '-', {
                    id: 'btncut',
                    text: '修改',
                    iconCls: 'icon-cut',
                    handler: function () {
                        //实现修改的方法
                        UpdateLzjs();
                }, '-', {
                    id: 'btnCancle',
                    text: '删除',
                    iconCls: 'icon-remove',
                    handler: function () {
                        //实现直接删除所有数据的方法
                        DeleteLzjs();
        $.extend($.fn.datagrid.methods, {
            editCell: function (jq, param) {
                return jq.each(function () {
                    var opts = $(this).datagrid('options');
                    var fields = $(this).datagrid('getColumnFields', true).concat($(this).datagrid('getColumnFields'));
                    for (var i = 0; i < fields.length; i++) {
                        var col = $(this).datagrid('getColumnOption', fields[i]);
                        col.editor1 = col.editor;
                        if (fields[i] != param.field) {
                            col.editor = null;
                    $(this).datagrid('beginEdit', param.index);
                    for (var i = 0; i < fields.length; i++) {
                        var col = $(this).datagrid('getColumnOption', fields[i]);
                        col.editor = col.editor1;
        var editIndex = undefined;
	//判断是否编辑结束
        function endEditing() {
            if (editIndex == undefined) { return true }
            if ($('#test').datagrid('validateRow', editIndex)) {
                $('#test').datagrid('endEdit', editIndex);
                editIndex = undefined;
                return true;
            } else {
                return false;
	//点击单元格触发的事件
        function onClickCell(index, field) {
            if (endEditing()) {
                $('#test').datagrid('selectRow', index)
						.datagrid('editCell', { index: index, field: field });
                editIndex = index;
	//编辑完单元格之后触发的事件
        function onAfterEdit(index, row, changes) {
            //…执行编辑单元格后需要执行的操作…
	    //…执行编辑单元格后需要执行的操作…
    </script>
</head>
        <table id="test" style="width: 955px; margin: 20px 0 10px 8px" title="新闻中心" iconcls="icon-edit">
        </table>
</body>
</html>

在Combobox类型的editor的数据源url: '/News/ReturnIsEnabledData'在相应Controller中对应的方法为(其实就是在后台拼了个特别简单的json串):

public string ReturnIsShowData()
            string strJson = "[{\"id\":\"yes\",\"text\":\"是\"},{\"id\":\"no\",\"text\":\"否\"}]";          
 
推荐文章
热心的罐头  ·  在时间序列中使用set_index从DataFrame中消除假日数据行 - 问答 - 腾讯云开发者社区-腾讯云
2 年前
威武的火车  ·  使用react-cropper结合图片压缩方法对图片进行裁剪压缩处理_0110_1024的博客-CSDN博客
2 年前
儒雅的保温杯  ·  如何借助glide lib在对话中显示GIF?
2 年前
深沉的生菜  ·  使用Web前端技术开发桌面应用---Electron中嵌入网页和打开子窗口_electron嵌入原生窗口_CreatorRay的博客-CSDN博客
2 年前
深情的鸵鸟  ·  es嵌套聚合dsl(求均值,求和)_es dsl分组_PacosonSWJTU的博客-CSDN博客
2 年前
Link管理   ·   Sov5搜索   ·   小百科
小百科 - 百科知识指南